Tools.us.org

CSS toolsGrid generator

CSS Grid Generator

Set the number of columns and rows, the gaps and the row height, and this CSS grid generator lays out numbered boxes as the browser would. Switch on responsive columns for a grid that adds and drops columns on its own as the screen gets wider or narrower.

1
2
3
4
5
6

Your CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 16px;
}

How to use the CSS grid generator

  • Choose how many columns and rows you need. The preview shows one numbered box per cell.

  • Set a row height, or slide it to zero to let the content decide (auto).

  • Set the space between columns and between rows. Equal gaps are written as one value.

  • Copy the CSS and give your container the class grid. Its direct children become the cells.

The CSS grid properties in the output

display: grid turns the element into a grid container; only its direct children are placed in the grid. grid-template-columns defines the column tracks: repeat(3, 1fr) is short for three equal columns that share the width. grid-template-rows does the same for rows when you set a fixed height; leave it out and each row is as tall as its tallest item.

gap is the space between tracks, never around the outside of the grid. With one value it applies to rows and columns; with two, the first is the row gap and the second the column gap. Older code used grid-gap, which browsers still accept as an alias.

Items that do not fit in the rows you defined are not lost: the grid adds implicit rows for them, sized by grid-auto-rows.

Responsive grids without media queries

Tick responsive columns and the generator writes repeat(auto-fit, minmax(160px, 1fr)). That line asks for as many columns as fit, each at least 160px wide and stretching to share what is left. On a phone you get one or two columns, on a wide screen five or six, and you write no breakpoints at all. Raise the minimum width for bigger cards, lower it for thumbnails.

Questions

What does 1fr mean in CSS grid?
fr is a fraction of the free space in the grid. repeat(3, 1fr) makes three columns of equal width; 2fr 1fr makes the first column twice as wide as the second.
What is the difference between auto-fit and auto-fill?
Both create as many columns as fit. With auto-fit, empty columns collapse and the items stretch to fill the row; with auto-fill, the empty tracks keep their space. For a card grid, auto-fit is usually what you want.
Should I use grid or flexbox?
Grid when you lay out in two directions at once, rows and columns, like a page or a gallery. Flexbox when items flow in one line and their own size should decide the layout, like a toolbar or a row of tags. Many pages use grid for the frame and flexbox inside it.
How do I place an item across several columns?
Give the item grid-column: span 2 (or grid-column: 1 / 3 for exact lines). grid-row works the same way for rows.

More CSS tools