CSS Grid Layout properties — container and item, with values and examples
CSS Grid Cheatsheet is a comprehensive reference for all CSS Grid properties with syntax, description, and live interactive examples. Browse container properties (display, grid-template-columns, grid-template-rows, grid-template-areas, gap, justify-items, align-items, place-items) and item properties (grid-column, grid-row, grid-area, justify-self, align-self). Each property includes common values and an interactive preview you can edit.
CSS Grid Layout (2017, now widely supported) is a two-dimensional layout system for the web. Unlike Flexbox (one-dimensional: row or column), Grid handles both rows and columns simultaneously. Key concepts: Grid Container: the element with display: grid. Grid Items: direct children of the container. Grid Lines: the dividing lines (numbered from 1). Grid Tracks: rows and columns between grid lines. Grid Cells: the smallest unit (intersection of row and column). Grid Areas: rectangular group of cells named with grid-template-areas. Implicit vs explicit grid: defined tracks are explicit; items placed outside create implicit tracks (controlled by grid-auto-rows/columns).
Modern CSS Grid features: subgrid (2023, Firefox 71+, Chrome 117+, Safari 16+): lets a nested grid inherit its parent grid tracks with grid-template-columns: subgrid -- enables perfectly aligned nested components. masonry layout (experimental, Firefox with flag): grid-template-rows: masonry creates a Pinterest-like layout. The repeat() function: grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) creates responsive columns without media queries -- items wrap automatically as viewport shrinks.
Responsive grid without media queries
Result: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) -- columns wrap automatically
Named grid areas layout
Result: grid-template-areas: "header header" "sidebar main" "footer footer" -- visual layout map
Center anything in a grid
Result: display: grid; place-items: center -- centers child both horizontally and vertically
What is the difference between CSS Grid and Flexbox?
Flexbox: one-dimensional -- controls items along a single axis (row or column). Best for: navigation bars, button groups, centering a single item, laying out items in a line with automatic sizing, where content drives the layout. Grid: two-dimensional -- controls items in both rows and columns simultaneously. Best for: page layouts (header/sidebar/main/footer), card grids, any layout where you need to control both axes, aligning items in rows AND columns. Practical rule: use Flexbox for component-level UI (buttons, nav items, form rows). Use Grid for page-level layout (and increasingly for component layout too). They work great together: a Grid layout can contain Flex items.
What does fr unit mean in CSS Grid?
fr (fraction unit) represents a fraction of the available free space in the grid container. Example: grid-template-columns: 1fr 2fr 1fr -- three columns where the middle is twice as wide as the others. Total = 4 parts: first = 25%, middle = 50%, third = 25%. fr is calculated AFTER fixed-size tracks are satisfied: grid-template-columns: 200px 1fr 1fr -- 200px is fixed, remaining space split equally into two fr tracks. If the container is 900px: 200px + 350px + 350px. fr columns can't be smaller than their content's min-content size. Combine with minmax(): minmax(0, 1fr) allows tracks to shrink below content size (unlike plain 1fr).
How does repeat(auto-fill) vs repeat(auto-fit) work?
Both create as many tracks as will fit in the container. auto-fill: creates tracks to fill the container -- if items don't fill all tracks, the empty tracks still exist and take up space. auto-fit: creates tracks to fit the items -- collapses empty tracks to 0 width. In practice, the difference is visible when items don't fill the container: with auto-fill + 4 items in a 6-track grid, tracks 5 and 6 exist (empty space on right). With auto-fit + 4 items, the 4 items stretch to fill the container. Most common usage: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) -- creates a responsive grid that automatically adjusts the number of columns based on container width, no media queries needed.
How do I create named grid areas?
grid-template-areas lets you name regions and place items by name. Container: grid-template-areas: 'header header header' 'sidebar main main' 'footer footer footer'; grid-template-columns: 200px 1fr 1fr; grid-template-rows: auto 1fr auto;. Items: .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; }. Rules: each row must have the same number of cells. Each area must be rectangular (no L-shapes). A period (.) is a placeholder for an unnamed area. You can create responsive layouts by redefining grid-template-areas in media queries -- the HTML stays the same, only the CSS changes. This is one of the most powerful CSS layout features.
What is CSS Subgrid and why is it useful?
Subgrid (CSS Grid Level 2, 2023) allows a nested grid to adopt its parent grid's tracks. Without subgrid: a card component inside a grid has its own independent grid -- internal elements (like card title and button) can't align with other cards' elements. With subgrid: .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; } -- the card's rows align with the parent grid's row tracks, enabling perfect cross-card alignment. Subgrid can be applied to columns, rows, or both. Browser support: Chrome 117+ (August 2023), Firefox 71+ (2019), Safari 16+ (2022). This is a major improvement for design systems and component libraries where alignment across independent components was previously very difficult.