CSS Grid
css-grid
Code Snippets
CSS Grid Responsive Layout Snippet
A responsive card grid that fills as many columns as fit and never produces an awkward last row is a one-line CSS Grid trick. This snippet covers the canonical `auto-fill` plus `minmax` recipe, the `auto-fit` variant that collapses empty tracks, and a row-spanning variant for masonry-like layouts. No media queries, no JavaScript.
Sticky Footer with Flexbox
A footer that stays at the bottom of the viewport on short pages and at the bottom of the content on long pages used to require absolute positioning, fixed heights, or table-cell tricks. Flexbox solves it with two declarations. This snippet covers the canonical body-flex layout, the grid-based equivalent, and the wrapper variant for apps that already have a top-level container.
Question Banks
Community
The 12-Column Grid I Keep, With Named Areas and Container Queries
I rewrote our marketing site grid three times before settling on this: a 12-column CSS Grid with named areas for the hero shape, container queries for the breakpoints, and custom properties for the gutter so designers can change one value.
Flexbox vs Grid: Pick the Right Tool
Flexbox is one-dimensional layout, Grid is two-dimensional. Most layout battles end faster when you pick the right one before you start writing CSS.
