Use the free CSS Grid Generator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What CSS Grid Is For
CSS Grid is the layout system for two-dimensional designs: anything arranged in rows and columns at the same time. Page layouts with a header, sidebar, content, and footer. Photo galleries. Card grids. Dashboards. Before grid, these layouts were built with floats, tables, or flexbox workarounds that fought the designer’s intent. Grid lets you describe the layout directly: so many columns, so many rows, this gap, this alignment, and the browser does the rest.
The core idea is simple. A container becomes a grid with display: grid, and its children become grid items placed into cells. You define the tracks, the columns and rows, with grid-template-columns and grid-template-rows. The repeat() function saves repetition: repeat(3, 1fr) means three equal columns. The fr unit is a fraction of the free space, so 1fr columns share the container evenly no matter its width.
How to Use the Tool
Set the number of columns and rows, the gap between cells, and the alignment options. The preview shows numbered cells so you can see the structure before you write any code. When the layout looks right, copy the container CSS and paste it into your stylesheet. Add your own content to the child elements; the grid handles their placement automatically.
Start with equal columns using 1fr, which covers most card grids and galleries. Change the gap to control breathing room: 12 to 24 pixels suits most content grids, while tighter gaps suit image galleries where the pictures should nearly touch. Alignment matters less for full grids, because items usually fill their cells, but it matters a lot when items are smaller than their cells.
Columns, Rows, and the Fr Unit
The fr unit is grid’s best idea. Unlike percentages, fractions account for gaps automatically: three 1fr columns with a 12-pixel gap divide the space left after the gaps, so nothing overflows. Mixed fractions give proportional layouts without maths: 2fr 1fr makes a main column twice as wide as a sidebar, and it stays proportional at every container width.
Fixed tracks have their place too. A sidebar that must stay 240 pixels wide should be 240px, not a fraction, and a header row that must stay 64 pixels tall should be 64px. Mixing fixed and fractional tracks is normal: 240px 1fr gives a fixed sidebar and a flexible content area, which is the most common application layout on the web.
Gap, Alignment, and Placement
Gap replaces the old margin hacks. One gap value sets both row and column spacing, and the browser never adds a gap after the last row or column, so edges stay flush. This alone removes a whole class of layout bugs where the last item in a row wrapped because its margin pushed the total over 100%.
Alignment in grid works on two levels. justify-content and align-content position the whole grid inside its container when the grid is smaller than the container. justify-items and align-items position items inside their cells. The tool exposes the container-level controls, which matter most when the grid does not fill its container, and stretch is the default that makes items fill their cells.
Grid Versus Flexbox
The rule of thumb is: grid for two dimensions, flexbox for one. If your layout needs control over rows and columns simultaneously, grid is the answer. If items flow in a single line or column, and you only care about spacing along that line, flexbox is simpler. A card grid is grid; a navigation bar is flexbox; a page with a sidebar and content area is grid, while the navigation inside the header is flexbox.
The two compose well. A grid cell can contain a flexbox container, and a flex item can contain a grid. Real pages mix them constantly: grid for the page skeleton, flexbox for the components inside it. Learning which tool fits each level is the skill, and the rule of thumb above answers it correctly in most cases.
Responsive Grids
A grid that looks great on desktop often needs fewer columns on a phone. The standard approach is media queries that change the column count: four columns on desktop, two on tablet, one on phone. The repeat() and gap values stay the same, so the change is one line per breakpoint.
For grids that should adapt without breakpoints, auto-fit and minmax are the answer: repeat(auto-fit, minmax(240px, 1fr)) creates as many 240-pixel-minimum columns as fit, and stretches them to fill the row. This single line replaces several media queries for card grids and galleries, and it is worth learning once you are comfortable with fixed column counts.
Common Mistakes
The most common mistake is forgetting that grid items are only the container’s direct children. Nested elements are not grid items, so a wrapper div around your cards will break the layout unless the wrapper itself becomes a grid or you flatten the structure. Another mistake is using grid for everything, including single-row navigation, where flexbox needs less code.
Also watch out for implicit tracks. If you place more items than your defined rows and columns allow, the browser creates extra tracks automatically, sized by content rather than your template. That is sometimes what you want, and sometimes a surprise: a grid defined as 3 columns with 7 items gets a third row you never declared. Define enough rows, or set the implicit track sizes deliberately, so surprises become decisions.