CSS Grid

0 lessons

2 code snippets

1 question bank

2 community items

css-grid

Code Snippets

2 snippets

Code Snippet

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.

CSS

css-selectors

css-grid

css-responsive-design

code-template

458

Easy

Code Snippet

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.

505

Question Banks

1 item

Question Bank

CSS Grid and Flexbox Quiz

Four drills on the differences between flexbox and grid, plus the gap, auto-fit, and minmax patterns that show up in real responsive layouts.

css-responsive-design

953

Medium

Community

2 items

Code Snippet

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.

1.1k

4.4 (13)

Jan 11, 2026

by @lucasmoreau

Article

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.