glunty

CSS Grid Cheat Sheet

A searchable reference of CSS Grid properties, values, and layout patterns with plain-English notes.

Property Value What it does
display: grid display: grid Turn an element into a grid container so its direct children become grid items.
display: inline-grid display: inline-grid Make a grid container that flows inline with surrounding text instead of as a block.
grid-template-columns grid-template-columns: 1fr 2fr Define the number and width of the columns in the grid.
grid-template-rows grid-template-rows: auto 1fr Define the number and height of the explicit rows in the grid.
grid-template-areas grid-template-areas: "head head" Name regions of the grid so items can be placed by area name instead of line numbers.
grid-template grid-template: rows / columns Shorthand that sets grid-template-rows, grid-template-columns, and areas at once.
gap gap: 1rem Set the space between rows and columns in one declaration.
row-gap row-gap: 1rem Set the vertical space between grid rows only.
column-gap column-gap: 1rem Set the horizontal space between grid columns only.
grid-auto-flow grid-auto-flow: row Control how auto-placed items fill the grid, by row, by column, or dense packing.
grid-auto-rows grid-auto-rows: 100px Set the height of rows the grid creates automatically for overflowing items.
grid-auto-columns grid-auto-columns: 100px Set the width of columns the grid creates automatically for overflowing items.
grid grid: auto-flow / 1fr 1fr Shorthand that sets every explicit and implicit grid property in one line.
fr unit grid-template-columns: 1fr 1fr The fr unit splits leftover space into equal fractions, so 1fr 1fr makes two equal columns.
repeat(3, 1fr) grid-template-columns: repeat(3, 1fr) Repeat a track pattern a set number of times, here three equal columns.
minmax(100px, 1fr) grid-template-columns: minmax(100px, 1fr) Let a track grow from a minimum size up to a maximum, here at least 100px but flexible.
repeat(auto-fill, ...) repeat(auto-fill, minmax(150px, 1fr)) Fit as many tracks as will fit, keeping empty tracks that still hold their space.
repeat(auto-fit, ...) repeat(auto-fit, minmax(150px, 1fr)) Fit as many tracks as will fit, then collapse empty tracks so items stretch to fill.
min-content grid-template-columns: min-content Size a track to the smallest width its content can take without overflowing.
max-content grid-template-columns: max-content Size a track to the full width its content wants without wrapping.
fit-content() grid-template-columns: fit-content(300px) Size a track to its content but cap it at the limit you pass.
auto grid-template-columns: auto 1fr An auto track sizes to its content, then shares remaining space with fr tracks.
grid-column grid-column: 2 / 4 Shorthand for grid-column-start and grid-column-end to place an item across columns.
grid-row grid-row: 1 / 3 Shorthand for grid-row-start and grid-row-end to place an item across rows.
grid-column: 1 / 3 grid-column: 1 / 3 Place an item from column line 1 to column line 3, spanning two columns.
grid-column: span 2 grid-column: span 2 Make an item span two columns from wherever it is placed, without naming an end line.
grid-area grid-area: header Place an item into a named template area, or set all four line positions at once.
named lines grid-template-columns: [start] 1fr [end] Name grid lines in square brackets so you can place items by line name.
line numbers grid-column: 2 / 4 Grid lines are numbered from 1 at the start edge, so you can place items by number.
negative line numbers grid-column: 1 / -1 Line -1 is the last line, so 1 / -1 stretches an item across the whole track.
grid-row: span 2 grid-row: span 2 Make an item span two rows, useful for tall cards in a gallery.
subgrid grid-template-columns: subgrid Let a nested grid reuse the track lines of its parent for aligned layouts.
justify-items justify-items: center Align all grid items along the row (horizontal) axis inside their cells.
align-items align-items: center Align all grid items along the column (vertical) axis inside their cells.
justify-content justify-content: space-between Distribute the whole grid along the row axis when it is narrower than the container.
align-content align-content: center Distribute the whole grid along the column axis when it is shorter than the container.
justify-self justify-self: end Override row-axis alignment for a single item inside its cell.
align-self align-self: start Override column-axis alignment for a single item inside its cell.
place-items place-items: center Shorthand that sets align-items and justify-items together.
place-content place-content: center Shorthand that sets align-content and justify-content together.
responsive auto-fit cards grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) A responsive card grid with no media queries; cards wrap and stretch to fill each row.
centering an item display: grid; place-items: center Center one child both ways by making the parent a grid and setting place-items to center.
holy-grail layout with grid-template-areas grid-template-areas: "head head" "nav main" "foot foot" Header, footer, sidebar, and main content placed by name using grid-template-areas.
sidebar plus main grid-template-columns: 250px 1fr A fixed-width sidebar next to a flexible main column that takes the remaining space.
12-column grid grid-template-columns: repeat(12, 1fr) A classic 12-column layout; place items with grid-column span to size them.

Runs entirely in your browser. Nothing you type is sent anywhere; open DevTools and watch the Network tab to verify zero requests.

What this tool does

This is a searchable quick reference for CSS Grid, covering the properties that set up a grid container, the functions that size tracks, the ways to place and span items, the alignment controls, and a few ready-to-paste layout recipes. Each row pairs a property or concept with an example value and a plain-English note on what it does. Type in the filter box to search across all three columns, or tap a category button to focus on one group. The whole sheet is built into the page, so it works offline and sends nothing anywhere.

How to use it

Start typing in the Filter box. Entering minmax jumps to the sizing functions; entering auto-fit surfaces the responsive card recipe; entering center shows the alignment and centering options. The category buttons (Container, Sizing, Placement, Alignment, Patterns) narrow the table to one family and combine with the text filter, so you can pick Placement and type span to see only the spanning shorthands. Clear the box to see the full sheet again.

Common use cases

  • Recalling the exact syntax for repeat(auto-fit, minmax(...)) when building a responsive card grid.
  • Copying a working grid-template-areas block for a header, sidebar, main, and footer layout.
  • Checking whether you want auto-fill or auto-fit before you ship a gallery.
  • Teaching a teammate how fr, minmax(), and the alignment shorthands fit together.
  • Reviewing the core CSS Grid model before an interview or a redesign.

Common pitfalls

  • Confusing justify and align. In grid, justify-* controls the row (inline) axis and align-* controls the column (block) axis. Reach for place-items: center when you want both at once.
  • Reaching for Flexbox when Grid fits better. If you are placing items into rows and columns at the same time, Grid is usually simpler than nesting several Flexbox containers inside each other.
  • Forgetting that auto-fit collapses empty tracks. auto-fit lets items stretch to fill the row, while auto-fill keeps empty columns reserved. Picking the wrong one changes how a sparse grid looks.
  • Overusing fixed pixel tracks. Hard-coded pixel columns break on small screens. Prefer fr units and minmax() so tracks flex, and add spacing with gap rather than margins.

Frequently asked questions

When should I use CSS Grid instead of Flexbox?
Grid is a two-dimensional system that controls rows and columns at the same time, so it shines for page and section layouts where you place items into a defined structure. Flexbox is one-dimensional, laying items out in a single row or column that can wrap, which suits toolbars, navigation, and content that should flow and size to fit. A common approach is Grid for the overall page skeleton and Flexbox for the smaller components inside each area. They work well together, so you do not have to pick only one.
What is the fr unit in CSS Grid?
The fr unit represents a fraction of the leftover space in a grid container after fixed sizes and gaps are subtracted. Writing grid-template-columns: 1fr 1fr creates two columns that share the free space equally, while 2fr 1fr gives the first column twice the width of the second. Because fr is based on remaining space rather than content, it makes flexible columns that resize smoothly as the container changes. You can mix fr with fixed units, so 250px 1fr pins a sidebar and lets the rest flex.
What is the difference between auto-fill and auto-fit?
Both are used inside repeat() to create as many tracks as will fit the container, usually paired with minmax(). auto-fill keeps any empty tracks it can fit, so extra column slots stay reserved and items do not stretch to fill them. auto-fit instead collapses empty tracks to zero width, letting the remaining items expand to take up the full row. For a card grid where you want items to stretch and fill the row, auto-fit is usually the one you want.
How do I center an item with CSS Grid?
Set the container to display: grid and add place-items: center, which centers the child on both the horizontal and vertical axes at once. place-items is shorthand for align-items and justify-items, so you can also set those two separately if you need different behavior per axis. To center a single item while leaving the others alone, use place-self: center or the individual justify-self and align-self on that item. This approach needs no fixed heights or negative margins.
What does the minmax() function do?
minmax(min, max) sets a lower and upper bound for a grid track, so it never shrinks below the minimum or grows past the maximum. A common pattern is minmax(200px, 1fr), which keeps each column at least 200px wide but lets it expand to share free space. Combined with repeat() and auto-fit, minmax() is the core of responsive card grids that reflow without any media queries. If content might be wider than the minimum you set, the track can still be pushed larger to avoid overflow.
Does this cheat sheet send my searches anywhere?
No. The entire property list is baked into the page at build time and every search and filter runs in your browser with JavaScript, so nothing you type leaves your device. There are no analytics scripts, trackers, or network calls during use. Open your browser DevTools and watch the Network tab while you search to confirm there are zero requests.

Embed this tool

Free for any use; attribution appreciated. Paste this on your site:

The embed runs the same tool that lives at this URL. No tracking; no ads inside the embed. Resize height as needed for your layout.

Cite this tool

For academic, journalistic, or technical references. Pick a format:

Citations use 2026 as the publication year. Access date is left as a fillable placeholder where the citation style expects one.

Embedded tool from glunty.com