CSS Grid is the most capable layout system the web has ever had. It lets you define both rows and columns simultaneously, place items precisely in a two-dimensional space, and build layouts that would have required float hacks, JavaScript, or nested tables just a decade ago. The catch is that Grid has a lot of properties, and knowing which ones to reach for in a given situation takes some time to internalize.
This cheatsheet covers every Grid property you'll actually use, organized by whether it applies to the container or to individual grid items. For the question of when to use Grid versus Flexbox, see CSS Grid vs Flexbox: When to Use Each. The short version: Grid when you're thinking in two dimensions; Flexbox when you're thinking in one.
Container Properties
Grid container properties are set on the element with display: grid. They define the structure of the grid itself.
display: grid / display: inline-grid
Turns an element into a grid container. All direct children become grid items automatically. inline-grid behaves like an inline element on the outside while still being a grid container on the inside.
.container {
display: grid;
}grid-template-columns and grid-template-rows
Define the track sizes of the grid's columns and rows. Values can be lengths, percentages, the fr unit (fraction of available space), or the keyword auto.
/* Three columns: fixed, flexible, fixed */
grid-template-columns: 200px 1fr 200px;
/* Two equal rows */
grid-template-rows: 1fr 1fr;
/* Named lines */
grid-template-columns: [sidebar-start] 250px [sidebar-end content-start] 1fr [content-end];The fr unit distributes the remaining space after fixed sizes are allocated. 1fr 2fr gives you a one-third/two-thirds split. 1fr 1fr 1fr gives three equal columns. The Grid Generator on DevToolShack lets you configure columns and rows visually and see the resulting CSS instantly.
repeat()
A shorthand for repeating track definitions. Instead of writing 1fr 1fr 1fr 1fr, write repeat(4, 1fr). Combine with auto-fill or auto-fit for responsive grids that don't need media queries.
/* 4 equal columns */
grid-template-columns: repeat(4, 1fr);
/* As many 200px columns as fit, filling the row */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Same, but collapse empty tracks */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));auto-fill keeps empty tracks; auto-fit collapses them so items stretch to fill. For card grids that reflow on resize, repeat(auto-fit, minmax(280px, 1fr)) is one of the most useful patterns in CSS.
grid-template-areas
Defines named areas in the grid using an ASCII-art syntax. Each string represents a row; each word in the string represents a cell. Use a period for empty cells.
.container {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }This is one of Grid's most readable features. The visual layout in your CSS mirrors the actual layout on screen.
gap (grid-gap)
Sets the spacing between tracks. gap: 1rem applies the same gap to rows and columns. gap: 1rem 2rem sets row-gap and column-gap separately. The older grid-gap property is deprecated; use gap.
gap: 1.5rem;
/* or */
row-gap: 1rem;
column-gap: 2rem;justify-items and align-items
justify-items aligns all grid items along the inline (horizontal) axis within their cells. align-items aligns them along the block (vertical) axis. Both accept start, end, center, and stretch (the default). place-items is the shorthand for both.
/* Center all items in their cells */
place-items: center;
/* Stretch vertically, align left horizontally */
align-items: stretch;
justify-items: start;justify-content and align-content
When the total size of your grid tracks is smaller than the container, these properties control how the whole grid is aligned within the container. justify-content works on the inline axis; align-content on the block axis. They accept the same flex-like values: start, end, center, stretch, space-between, space-around, space-evenly. place-content is the shorthand.
grid-auto-columns and grid-auto-rows
Set the size of implicitly-created tracks — those created when items are placed outside the explicitly defined grid. If you place an item in column 5 but only defined 3 columns, a fourth and fifth column are created implicitly. These properties control how large those implicit tracks are.
grid-auto-rows: minmax(100px, auto);grid-auto-flow
Controls how auto-placed items fill the grid. row (default) fills row by row. column fills column by column. Adding dense to either tells the browser to backfill gaps with smaller items — useful for masonry-like layouts, though it reorders items visually which can hurt accessibility.
grid-auto-flow: row dense;Item Properties
Grid item properties are set on the direct children of a grid container. They control where an item is placed and how it spans.
grid-column and grid-row
Position an item by specifying which grid lines it starts and ends on. Lines are numbered from 1; negative numbers count from the end. The shorthand uses a slash: grid-column: start / end.
/* Span from column line 1 to line 3 (occupies 2 columns) */
grid-column: 1 / 3;
/* Start at line 2, span 2 columns */
grid-column: 2 / span 2;
/* Span the full width */
grid-column: 1 / -1;
/* Rows work the same way */
grid-row: 1 / 3;grid-area
Either assigns the item to a named area (defined with grid-template-areas) or serves as a shorthand for grid-row-start / grid-column-start / grid-row-end / grid-column-end.
/* Named area */
grid-area: sidebar;
/* Shorthand for row-start / col-start / row-end / col-end */
grid-area: 1 / 1 / 3 / 4;justify-self and align-self
Override the container's justify-items and align-items for a single item. place-self is the shorthand for both.
/* Center this specific item in its cell */
place-self: center;
/* Stretch vertically, push to end horizontally */
align-self: stretch;
justify-self: end;The minmax() Function
minmax(min, max) defines a size range for a track. A track will be at least min and at most max. Combine with auto for tracks that grow to fit their content but never shrink below a minimum.
/* Rows that are at least 100px but grow to fit content */
grid-auto-rows: minmax(100px, auto);
/* Responsive columns, min 250px, max 1fr */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));Common Grid Patterns
Holy Grail Layout
.layout {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
}Responsive Card Grid
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}Centered Content with Max Width
.page {
display: grid;
grid-template-columns:
1fr
min(65ch, 100%)
1fr;
}
.page > * {
grid-column: 2;
}
.page > .full-bleed {
grid-column: 1 / -1;
}Grid in DevTools
Both Chrome and Firefox DevTools have dedicated Grid inspectors. In Chrome, open DevTools, go to Elements, and look for the "grid" badge next to any grid container in the HTML panel. Clicking it overlays the grid lines on the page with line numbers and track sizes, which makes it much easier to understand why items are placed where they are. This is invaluable when debugging placement issues.
Grid and Accessibility
Grid changes the visual order of items without changing the DOM order, which is both a superpower and a responsibility. Screen readers and keyboard navigation follow DOM order, not visual order. If you use grid-auto-flow: dense or manually place items in a visually different order than they appear in the HTML, make sure the reading order still makes sense for keyboard users. The CSS specificity of grid placement rules doesn't affect this — order in the source matters for accessibility regardless of how you've positioned things visually.