CSS Grid Layout Patterns I Use on Every Project
Grid is the most powerful layout tool in CSS, but most of the time I reach for the same handful of patterns. Here are the ones I use constantly. CSS Grid is flexible enough to express almost any layout, and that flexibility can be paralyzing. When anything is possible, choosing becomes harder. Over time I have settled on a small set of grid patterns that handle the vast majority of layouts I build. I reach for these on every project, and they cover page structure, card layouts, sidebars, and dashboards. Here are the patterns and when I use each one. The Auto-Fit Card Grid This is the pattern I use most. A grid of cards that automatically adjusts the number of columns based on available width, with each column at least a minimum size. It is responsive without any media queries because the column count is derived from the container width and the minimum column size. .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } The minmax function defines each column as at least 240px and at most 1fr, meaning equal share of remaining space. auto-fit creates as many columns as fit. On a wide container, five or six columns appear. On a narrow container, one column. More guides are on the Spark Blog.