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:
Get hands-on with 1400+ tech skills courses.