CSS Grid Generator

Set columns, rows and gap visually and copy the grid-template-columns and grid-template-rows rules straight into your stylesheet.

How to use
  1. Set the number of columns, rows and the gap.
  2. Adjust the track sizes in the preview.
  3. Copy the generated grid CSS.
Frequently asked questions
What is the fr unit?
A fraction of the leftover space. Three columns at 1fr each split the row evenly, and 2fr 1fr gives the first column twice the remainder of the second.
When should I use minmax?
When a track needs a floor and a ceiling, such as minmax(200px, 1fr) for a column that never goes narrower than 200 pixels but still grows.
Grid or flexbox?
Grid when you are laying out in two dimensions at once. Flexbox when content flows along a single axis and you want it to wrap naturally.
Does the generated CSS need prefixes?
No. Every browser in current use supports unprefixed CSS grid; the old -ms- syntax only matters if you still support Internet Explorer.
 Last updated 
Powered by maratool