CSS Grid Explorer
Learn CSS Grid by changing it and watching what happens. Each tab covers one part of Grid: the repeat() function with auto-fit and auto-fill, track sizes such as fr, minmax() and fit-content(), alignment, named template areas and the implicit grid.
The preview draws the grid’s cells and numbers its lines, and a short explanation under it says what the browser has done with your settings. Copy the CSS and HTML from any tab when you’re done.
Want to build a whole page layout rather than learn how Grid works? Use the CSS Grid Generator to draw your rows, columns and areas visually and copy the finished code.
The repeat() function
repeat(4, 1fr) makes a fixed number of equal columns. Swap the number for auto-fit or auto-fill and combine it with minmax(), and the grid works out how many columns fit, so the layout responds to the container without media queries.
The two keywords only differ when there are fewer items than columns: auto-fill keeps the empty columns, while auto-fit collapses them so the items stretch. Change the width or drag the corner of the preview to compare them.
Preview
Track sizing
Columns and rows can be sized with fixed lengths, fractions of the free space (fr), content keywords (auto, min-content, max-content) and the minmax() and fit-content() functions. Pick a template, or type your own, and compare the measured sizes below the preview.
Preview
Grid alignment
Grid aligns on two levels. justify-items and align-items place each item inside its cell, and justify-self and align-self override that for one item. justify-content and align-content move the whole set of tracks inside the container, which only works when the tracks leave spare space.
Preview
Named grid areas
grid-template-areas lets you draw a layout as text: each quoted string is a row, each word names a cell, a name repeated across cells makes one larger area and . leaves a cell empty. Items are then placed with grid-area: name. Edit the template or start from a preset.
Preview
The implicit grid
The explicit grid is the rows and columns you define. When there are more items than cells, the browser adds implicit tracks to hold them, sized by grid-auto-rows or grid-auto-columns. grid-auto-flow decides whether the extras form new rows or new columns.
Preview
About this tool
Reading the preview
The dashed boxes are the grid’s cells and the small numbers are its line numbers, the same numbers you use with grid-column and grid-row. The outline is drawn by the browser from your actual grid, so collapsed auto-fit columns, implicit rows and the spare space used by justify-content all show up as they really are.
Turn the lines off under View to see the grid as it will look on your page.
The fr unit
fr shares out the space left after fixed and content-sized tracks have been placed: 1fr 2fr gives the second column twice as much as the first. A plain 1fr never shrinks below its content, so a long word or a wide image can make one column wider than the rest. Use minmax(0, 1fr) when the columns must stay equal.
A responsive grid in one line
This makes as many columns of at least 200px as fit in the container and stretches them to fill the row, with no media queries:
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}Use minmax(min(200px, 100%), 1fr) to stop the columns overflowing containers narrower than 200px.
Explicit and implicit
- The explicit grid is set by
grid-template-columns,grid-template-rowsandgrid-template-areas. - Implicit tracks are added when items don’t fit, or are placed outside it. Size them with
grid-auto-rowsandgrid-auto-columns; they areautoby default. - Negative line numbers such as
grid-column: 1 / -1count from the end of the explicit grid only.
Frequently Asked Questions
What is the difference between auto-fit and auto-fill?
Both make as many columns as fit in the container. The difference shows when there are fewer items than columns: auto-fill keeps the empty columns, so the items stay at their minimum size, while auto-fit collapses the empty columns to zero, so the items stretch to fill the row. When the row is full, they behave the same.
What does the fr unit mean?
fr stands for a fraction of the free space in the grid container. The browser first sizes fixed and content-based tracks, then divides what’s left between the fr tracks in proportion: 1fr 2fr splits it one third and two thirds. A 1fr track has a minimum of auto, so it won’t shrink below its content unless you write minmax(0, 1fr).
How does minmax() work in CSS Grid?
minmax(min, max) sets a size range for a track: it’s never smaller than the first value and never larger than the second. minmax(100px, 1fr) makes a flexible column that stops shrinking at 100px. Combined with repeat(auto-fit, …), it creates responsive grids that add or remove columns as the container changes width.
What is the difference between justify-items and justify-content?
justify-items positions each item inside its own cell along the row. justify-content positions the whole set of columns inside the container, and only has an effect when the columns don’t fill it, for example when they have fixed widths. The align- versions do the same thing vertically, and place-items and place-content set both at once.
Why doesn’t justify-content or align-content do anything?
Content alignment moves the tracks within spare space, so there has to be some. Flexible tracks such as 1fr take all the free space, leaving nothing to distribute. For align-content, the grid container also needs to be taller than its rows, for example with a set height. The Alignment tab shows how much spare space there is.
How do grid-template-areas work?
Write one quoted string per row, with a name for each cell: "header header" "sidebar main". Repeating a name makes an area span those cells, and . marks an empty cell. Then give each item grid-area: header and so on. Every row needs the same number of cells and every area has to be a rectangle, otherwise the whole declaration is ignored.
What is the implicit grid?
The implicit grid is made of tracks the browser creates by itself when items don’t fit into the rows and columns you defined, or are placed outside them. By default implicit rows are auto sized; set grid-auto-rows (or grid-auto-columns) to give them a size, such as minmax(100px, auto).
What does grid-auto-flow: column do?
It makes auto-placed items fill the grid column by column instead of row by row. When the explicit grid is full, new columns are added rather than new rows, sized by grid-auto-columns. Adding dense, as in grid-auto-flow: row dense, lets later items fill gaps left by earlier large items.
Is CSS Grid supported in all browsers?
Yes. Every current browser supports CSS Grid, including repeat(), minmax(), fit-content(), named areas and the gap property, and has done since 2017. Newer additions such as subgrid have worked in all of them since late 2023.