What is CSS Grid?
CSS Grid is a two-dimensional layout system. You define rows and columns on the container with grid-template-columns and grid-template-rows, and the browser places each child into the resulting cells — in order, or wherever you tell it with grid-column and grid-row. Because both axes are controlled together, grid is ideal for page layouts, card galleries, dashboards and any design where items must line up across rows.
Track sizes can be fixed (200px, 10rem), flexible with the fr unit, content-based (auto, min-content, max-content) or bounded with minmax(min, max). One fr is one share of the free space left after fixed tracks and gaps are subtracted, so 240px 1fr gives a fixed sidebar and a fluid main column.
The pattern repeat(auto-fit, minmax(200px, 1fr)) creates as many columns as fit, each at least 200px wide, and reflows as the container resizes — a responsive grid without a single media query. Wrapping the minimum in min(200px, 100%), as this generator does, prevents horizontal overflow when the container is narrower than the minimum.
How to use the CSS Grid Generator
- Choose explicit tracks or the responsive auto-fit mode.
- For explicit tracks, set the number of columns and rows and type a size for each, or use "Set all" for quick values like 1fr or minmax(100px, 1fr).
- Adjust the column and row gaps and the justify-items / align-items alignment.
- Click an item in the preview to make it span several columns or rows; enable dense packing to back-fill gaps.
- Copy the CSS and HTML, or start from a preset such as Holy grail, Bento or Responsive cards.
Example
A responsive card grid that needs no media queries:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 24px;
}Grid tips
- auto-fit vs auto-fill: with few items,
auto-fitcollapses empty tracks so items stretch to fill the row;auto-fillkeeps the empty tracks and items stay at their minimum width. 1frreally meansminmax(auto, 1fr), so a long word or wide image can make a column grow. Useminmax(0, 1fr)when columns must stay equal.grid-auto-flow: densefills holes left by spanning items, but it can change the visual order compared to the source order — keep that in mind for keyboard and screen-reader users.- Spanning more columns than an explicit grid has creates implicit columns. In responsive grids, keep spans small or reset them in a media query for narrow screens.
- Use
gaprather than margins: it only appears between tracks, never at the edges. - For one-dimensional rows of items such as toolbars, the Flexbox Generator is simpler. Make gaps fluid with the CSS Clamp Generator and size media with the Aspect Ratio Calculator.
Frequently Asked Questions
What does the fr unit mean?
fr is a fraction of the free space in the grid container. After fixed tracks and gaps are subtracted, the remaining space is divided by the total number of fr units — 1fr 2fr gives the second column twice the space of the first.
When should I use grid instead of flexbox?
Use grid when you need control over rows and columns at once, or when the layout should be defined by the container rather than the content. Use flexbox for a single row or column of items whose sizes come from their content.
How do I make an item span multiple columns?
Set grid-column: span 2 on the item (or grid-column: 1 / -1 to stretch across all explicit columns). Rows work the same way with grid-row.
How do I make a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)). The browser fits as many 200px-plus columns as possible and redistributes them when the container width changes.
What is the difference between justify-items and justify-content?
justify-items aligns each item inside its own grid cell along the row axis. justify-content aligns the whole grid inside the container when the tracks are smaller than the container. The same applies to align-items and align-content on the column axis.