About this CSS Grid generator
CSS Grid lays out a page in two dimensions at once, rows and columns, which makes headers, sidebars, galleries, and dashboards far simpler than floats or nested flexboxes. Its syntax, though, packs a lot into a few properties. This generator lets you build the grid by hand: choose how many tracks you want and size each one with fr units, pixels, percentages, auto, or minmax(); set the gaps and default alignment; then draw items across cells directly in the editor. It writes compact CSS, using repeat() where tracks match and span for multi-cell items, plus HTML with one element per item, and shows a live preview of the result. Every modern browser supports CSS Grid.
How to build a CSS grid
- Set the tracks. Choose the number of columns and rows and type a size for each, or start from a preset such as Holy Grail or Dashboard.
- Place items. Click two cells in the editor to draw an item between them, then rename it or change its span.
- Press Generate CSS. Check the preview, then copy or download the CSS and the HTML.
Frequently asked questions
What does the fr unit mean?
One fraction of the free space. Three 1fr columns share the width equally; 2fr 1fr gives the first column twice the space of the second.
When should I use minmax()?
When a track should never shrink below a size but may grow. minmax(200px, 1fr) keeps cards at least 200px wide while filling extra space.
Grid or Flexbox?
Use Grid for two-dimensional layouts where rows and columns line up, and Flexbox for one row or column of items, such as a navbar or a button group.
How do I make the grid responsive?
Use fr and minmax() tracks, or change grid-template-columns in a media query, for example to a single 1fr column on phones.
What are grid line numbers?
Lines run between tracks starting at 1. grid-column: 1 / 3 spans from line 1 to line 3, which covers the first two columns.