CSS Grid in Practice: The Layouts That Actually Come Up at Work

I've been using CSS Grid in production since 2018. After eight years of building layouts with it, I've noticed something: the same five or six patterns account for about 95% of my Grid usage. The specification is enormous -- grid has more properties than any other CSS module -- but you don't need all of it. You need the patterns that solve real layout problems. Here are the ones I use constantly, with the exact CSS. The responsive card grid This is the single most common Grid use case. A grid of cards that adapts to the available width without media queries. .card-grid { display : grid ; grid-template-columns : repeat ( auto-fill , minmax ( 280px , 1 fr )); gap : 24px ; } auto-fill creates as many columns as will fit. minmax(280px, 1fr) says each column must be at least 280px but can grow to fill available space equally. On a 1200px container, you get four columns. On a 600px container, you get two. On a phone, you get one. No media queries. The alternative auto-fit collapses empty tra