How to build a CSS grid layout
- Set the number of columns and rows and the gaps between them.
- Type a size for each column and row:
1frshares the free space,200pxis fixed,autofits the content andminmax(150px, 1fr)sets a range. - Drag across empty cells in the preview to create an item that spans them. Tap an item to remove it. Example layout builds a classic header, sidebar, main and footer page.
- Copy the CSS and the matching HTML.
CSS Grid in a nutshell
CSS Grid is a two-dimensional layout system: you define columns and rows on a container, then place children into the cells. grid-template-columns and grid-template-rows set the track sizes, and gap sets the gutters. Each item is placed with grid-column: start / end and grid-row: start / end, where the numbers are grid lines, not cells: an item spanning columns 1 to 3 uses grid-column: 1 / 4.
The fr unit divides the remaining space after fixed tracks and gaps, which makes fluid layouts simple. For responsive card grids without media queries, use repeat(auto-fit, minmax(240px, 1fr)) as the column template: columns are added or removed automatically as the screen width changes. On small screens, you can switch a complex layout to a single column with one media query that redefines the template.
Grid is supported by every modern browser. This builder runs locally and saves your layout on this device.
Should I use Grid or Flexbox?
Use Grid for two-dimensional layouts (rows and columns together, like page layouts and galleries) and Flexbox for one-dimensional rows or columns of items, like toolbars.
What does 1fr mean?
One fraction of the free space. Three 1fr columns are equal; 2fr 1fr makes the first column twice as wide as the second.
Can items overlap?
In CSS, yes. This builder prevents overlaps to keep layouts simple; edit the generated CSS if you want layered items.