Aspect-ratio card
Media card with consistent ratio and object-fit.
Auto-responsive card grid
The RAM pattern: repeat(auto-fill, minmax()) for grids that adapt without media queries.
Center with place-items
The simplest CSS centering technique: one line of grid + place-items.
Container query cards
Cards that respond to container width with @container.
Holy grail layout
The classic holy grail layout with header, two sidebars, content, and footer using CSS Grid template areas.
Media object
The classic media object pattern with image on the left and text on the right using flexbox and object-fit.
Responsive table
A table that stacks into card-like rows on small screens using container queries and data-label attributes.
Scroll snap image gallery
A horizontal scrolling gallery that snaps to each image using scroll-snap.
Sidebar + content layout
A sidebar alongside main content using CSS Grid fit-content.
Sticky footer
A sticky footer that stays at the bottom of the viewport even with short content.
Subgrid layout
Aligned grid children with CSS subgrid — no fixed heights.