Search⌘ K
AI Features
Home
Courses
Mastering the Latest Features in CSS

Responsive Layouts with Grid and Flexbox

Explore how to create responsive CSS layouts using Grid and Flexbox. Learn techniques to set flexible column widths and spacing without media queries, enabling fluid designs that adapt to various screen sizes.

We'll cover the following...

The foundation for many sites continues to be a layout grid, whether that’s composed of a grid or a flexbox. Both of these tools provide ways to create fluidly responsive layout grids without media queries.

Grid

First up is perhaps the most popular solution because of its versatility and ease of use. Using Grid, we can create a responsive set of columns that create themselves as needed. We’ll provide a single constraint—a minimum width for columns—that serves as a breakpoint before column items break onto new rows.

Here’s all it takes to accomplish this responsive grid layout, where our minimum column size is set to 30ch via a helper custom property. This rule directs the browser to create as many columns as will fit that are at least 30ch wide:

NAME_
CSS
.grid {
  --min: 30ch;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr)); 
}

Since 1fr is the maximum ...