CSS Grid Generator
The CSS Grid Generator builds grid layouts from a column and row count, gaps, optional custom grid-template values and item alignment, with a live preview and copy-ready CSS.
About this tool
The CSS Grid Generator builds grid layouts from a column and row count, gaps, optional custom grid-template values and item alignment, with a live preview and copy-ready CSS.
How to use it
- Set the number of columns and rows.
- Adjust the column and row gaps.
- Optionally enter custom templates such as 200px 1fr 1fr.
- Choose justify-items and align-items, then click Copy CSS.
Good to know
- The fr unit shares the free space: 1fr 2fr gives the second column twice the width of the first.
- repeat(3, 1fr) is shorthand for three equal columns.
- column-gap and row-gap set the gutters between tracks.
- Grid is two-dimensional, controlling rows and columns together.
- repeat(auto-fit, minmax(200px, 1fr)) creates a responsive grid without media queries.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I create a 3-column grid in CSS?
Use display: grid; grid-template-columns: repeat(3, 1fr); on the container, and add a gap for spacing.
What does fr mean in CSS Grid?
fr is a fraction of the available free space in the grid container.
CSS Grid or Flexbox?
Grid is best for two-dimensional layouts such as page structures and card grids; Flexbox for one-dimensional rows or columns.
How do I make a responsive grid without media queries?
Use grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); columns then wrap automatically as space allows.