~/frontend-tools/css-grid-cheatsheet

CSS Grid Cheat Sheet

ToolRuns in your browserNothing is uploadedFree · no sign-up

A hands-on reference for CSS Grid. Click through track templates, gaps, alignment and auto-flow on the container, make an item span columns or rows, and try a named-area page layout, all on a live grid with the CSS shown next to it.

Container properties

grid-template-columns

The number and size of the columns.

grid-template-rows

Explicit row sizes. Without it, rows are created as needed and sized to their content.

gap

Row and column gaps. Two values set rows first, then columns.

justify-items

Horizontal position of each item inside its cell.

align-items

Vertical position of each item inside its cell.

justify-content

Positions the whole grid when the columns are narrower than the container.

grid-auto-flow

How automatically placed items fill the grid. dense back-fills gaps.

Item properties apply to the highlighted item; click an item to select it

grid-column

Which columns the item covers. 1 / -1 spans the full width.

grid-row

Which rows the item covers.

justify-self

Overrides justify-items for this item.

align-self

Overrides align-items for this item.

Named areas

grid-template-areas

Draws the layout as text: "header header" "side main" "footer footer".

CSS

Using the CSS Grid Cheat Sheet

Defining tracks

grid-template-columns and grid-template-rows list the size of each track. Use fr for shares of free space, fixed lengths for exact sizes, auto to fit content, and repeat() to avoid repetition. repeat(auto-fill, minmax(160px, 1fr)) builds a responsive grid without media queries.

Placing items

Items flow into cells automatically in source order. To place one deliberately, use grid-column and grid-row with line numbers or spans, such as grid-column: span 2. grid-auto-flow: dense back-fills gaps left by spanning items.

Named areas

grid-template-areas draws the layout as text, one quoted string per row, and each child claims an area with grid-area. It is the most readable way to build page layouts such as header, sidebar, main and footer, and the areas can be rearranged in a media query.

Alignment

justify-items and align-items position items inside their cells; justify-content and align-content position the whole grid inside the container when the tracks do not fill it. Individual items can override with justify-self and align-self.

Frequently asked questions

auto-fill or auto-fit?

Both create as many tracks as fit. auto-fill keeps empty tracks, auto-fit collapses them so the existing items stretch to fill the row.

Can grid and flexbox be combined?

Yes, and they often are: grid for the page or card layout, flexbox inside each card for a row of buttons.

Is there a generator?

Yes, the CSS grid generator builds column and gap settings with sliders.