A CSS Grid cheatsheet is a quick reference for every grid container and item property. CSS Grid is the most powerful two-dimensional layout system in CSS, letting you control rows and columns simultaneously with precise placement and responsive patterns. Click any value below to see a live preview instantly.
grid makes the element a block-level grid container. inline-grid makes it inline-level — it sits inline with surrounding text.
fr = fractional unit — divides remaining space. repeat(n, size) repeats a track n times. minmax(min, max) sets a flexible size range.
auto sizes rows to fit content. Explicit row heights give precise control over the grid's vertical rhythm.
Each string is a row. Repeat a name across columns to span. Use . for empty cells. Assign items with grid-area: name.
gap: row col sets row and column gaps separately. row-gap and column-gap set them individually.
stretch (default) makes items fill their cell width. Other values shrink items to content size and align them within the cell.
Controls vertical placement within each row track. Use with varying-height items to see the difference clearly.
Only has effect when total column widths are less than the container. Uses fixed-width 60px columns in this demo so you can see the distribution.
Only has effect when total row heights are less than the container height. The demo uses fixed 40px rows with extra container height.
When items overflow defined rows, implicit tracks are created. grid-auto-rows sizes these new rows. Use minmax(min, auto) to enforce a minimum height.
row (default) fills row by row. column fills column by column. dense back-fills gaps when earlier items span multiple tracks.
The highlighted item (★) is being controlled. 1 / 3 = start at line 1, end at line 3. span 2 = span 2 columns from current position.
The highlighted item (★) spans rows. This is how you create sidebar-style items that span multiple row heights.
When used with grid-template-areas on the container, grid-area assigns the item to a named region. Can also be used as shorthand: grid-area: row-start / col-start / row-end / col-end.
Overrides justify-items for this specific item (★). Other items remain unaffected.
Overrides align-items for this one item (★). Useful when one item needs different vertical alignment than its row siblings.
place-self: align justify. Single value sets both. center = perfectly centered in cell on both axes.
.layout {
display: grid;
grid-template-columns: 160px 1fr 160px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"left main right"
"footer footer footer";
min-height: 100vh;
gap: 8px;
}
.cards {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
The grid automatically creates as many columns as fit at minimum 240px wide. As the container shrinks, columns wrap to new rows — no JavaScript or media queries needed.
.app {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
min-height: 100vh;
}
/* Collapse on mobile */
@media (max-width: 768px) {
.app { grid-template-columns: 1fr; }
.sidebar { display: none; }
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
gap: 8px;
}
/* Featured image spans 2×2 */
.featured {
grid-column: span 2;
grid-row: span 2;
}
How to Use This CSS Grid Cheatsheet
This interactive CSS Grid cheatsheet covers every container and item property with live previews you can click. Use the tabs to jump between Container Properties, Item Properties, and Common Patterns — or type in the search box to filter by property name or keyword.
Step 1: Understand the two key concepts
CSS Grid has two layers: the grid container (the parent element you apply display: grid to) and grid items (the direct children). Container properties set up the structure — tracks, gaps, alignment. Item properties control where individual children are placed within that structure.
Step 2: Define your column and row tracks
Start with grid-template-columns to define how many columns exist and how wide each is. The fr unit divides remaining space proportionally — repeat(3, 1fr) creates three equal columns. For responsive grids, combine repeat(auto-fill, minmax(240px, 1fr)) to let columns wrap automatically without media queries.
Step 3: Use named areas for complex layouts
grid-template-areas lets you define layouts with ASCII-art syntax. Write each row as a quoted string with space-separated names. Repeat a name across columns to make that region span multiple tracks. Then assign items using grid-area: name on each child. This approach makes complex layouts like holy grail extremely readable.
Step 4: Place items with grid-column and grid-row
For precise placement, use grid-column: start / end on individual items. Line numbers start at 1 from the left edge. Negative numbers count from the right — 1 / -1 spans the full width. The span keyword is simpler: grid-column: span 2 spans two columns from wherever the item naturally falls.
Step 5: Control alignment
justify-items and align-items align all items within their cells (horizontal and vertical respectively). justify-content and align-content distribute the entire grid when it's smaller than its container. For one-off overrides on a single item, use justify-self, align-self, or the place-self shorthand.
Browser support
CSS Grid is supported in all modern browsers (Chrome, Firefox, Safari, Edge) — over 97% of global users. The subgrid value for grid-template-columns/rows has broader support as of 2023. For most production use cases, all properties covered in this CSS Grid cheatsheet are safe to use without any fallback.
FAQ
Is this CSS Grid cheatsheet free?
Yes, completely free with no signup, no account, and no hidden fees. Everything runs in your browser with no data sent to any server.
Is my data safe when using this tool?
Absolutely. This cheatsheet runs entirely in your browser — no data is collected or stored anywhere.
What is the difference between CSS Grid and Flexbox?
CSS Grid is a two-dimensional layout system that controls both rows and columns simultaneously. Flexbox is one-dimensional — it handles either a row or a column at a time. Grid is ideal for full-page layouts and complex two-axis positioning; Flexbox is better for distributing items along a single axis.
What does the fr unit mean in CSS Grid?
The fr (fractional) unit represents a fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first. After fixed-size columns are placed, fr units divide the remaining space proportionally.
What is the difference between auto-fill and auto-fit in CSS Grid?
Both auto-fill and auto-fit create as many columns as will fit in the container. The difference appears when there are fewer items than columns: auto-fill keeps empty column tracks, preserving their space; auto-fit collapses empty tracks so existing items can grow to fill the space.
How do grid-column and grid-row work?
grid-column and grid-row are shorthand properties that let a grid item span across tracks. They use line numbers or span keywords. For example, grid-column: 1 / 3 makes an item start at column line 1 and end at line 3, spanning 2 columns. grid-column: span 2 does the same without specifying start/end lines.
What is grid-template-areas and when should I use it?
grid-template-areas lets you define a grid layout using named regions with a visual ASCII-art syntax. It makes complex layouts like holy grail (header, sidebar, main, footer) easy to read and maintain. Each named area must form a rectangle. Items are then placed using grid-area: name on child elements.
Can I print or save this CSS Grid cheatsheet?
Yes. Use your browser's print function (Ctrl+P / Cmd+P) to print or save as PDF. The cheatsheet is designed to be scannable and readable in printed form.