CSS Grid Snippets — Free HTML CSS JS CSS Grid Layout Examples

CSS Grid is the first layout system on the web that lets you describe a two-dimensional arrangement directly instead of approximating it. These snippets use it for what it is best at: bento-box feature sections, dashboard shells, card galleries that reflow without media queries, and page layouts defined as named template areas you can read at a glance.

The recurring trick is repeat(auto-fit, minmax(...)) — a grid that decides its own column count from the available width, which removes most breakpoint maintenance from a card layout.

Two dimensions, described directly

Before Grid, a two-dimensional layout meant nesting flexbox containers or relying on float-based hacks to approximate rows and columns together. Grid lets a single declaration describe both axes at once — track sizes, gaps and item placement — which is why a bento-box section with items of varying size is a handful of grid-column and grid-row spans rather than a nest of wrapper divs.

auto-fit and minmax removing breakpoints

repeat(auto-fit, minmax(240px, 1fr)) tells the browser to fit as many 240px-minimum columns as the container allows, stretching them to fill any remaining space, and to collapse to fewer columns as the viewport narrows — all without a single @media query. This one line is doing the job that used to take three separate breakpoints per card grid, and it never produces the orphaned single-item row that a fixed column count does at odd widths.

Named areas as a legible layout language

grid-template-areas lets a layout be described as a literal ASCII diagram of named regions — "header header" / "sidebar content" / "footer footer" — and the elements assigned to each area follow that shape without any additional positioning code. Reading the stylesheet tells you the actual page structure at a glance, which is a real advantage over inferring the same structure from nested markup and margins.

Where Grid's limits show up

CSS still has no native masonry layout in every browser, so packing items of different heights into a Pinterest-style grid uses grid-auto-flow: dense with varied row spans as a convincing approximation rather than true masonry. And Grid composes with, rather than replaces, Flexbox: a page-level grid shell whose individual cells lay out their own content with flex is the most common and most maintainable real-world combination.