100% PrivateFree
Preview
1
2
3
4
5
6
Grid Properties
3
2
12px
CSS Output
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  grid-auto-flow: row;
}

How It Works

1

Set Grid Dimensions

Choose the number of columns and rows, or type custom template values like "1fr 2fr auto".

2

Adjust Gap and Flow

Set the gap between cells and choose the auto-flow direction.

3

Copy CSS

Copy the generated CSS grid properties to use in your project.

Frequently Asked Questions

What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you arrange elements in rows and columns simultaneously. It is ideal for page layouts and complex component designs.
What does grid-template-columns do?
grid-template-columns defines the number and size of columns in a grid. Values like "1fr 1fr 1fr" create three equal columns, while "200px 1fr 2fr" mixes fixed and flexible widths.
What is the fr unit?
The fr (fraction) unit represents a fraction of the available space. In "1fr 2fr", the second column takes twice the space of the first.
What is grid-auto-flow?
grid-auto-flow controls how auto-placed items fill the grid. "row" fills row by row (default), "column" fills column by column, and "dense" fills gaps in the grid.
Can I combine Grid and Flexbox?
Yes, Grid and Flexbox complement each other. Use Grid for the overall page layout and Flexbox for component-level alignment within grid cells.
Share:

Explore More

Love this tool? Explore 999+ more

Free online tools for images, PDFs, text, code, and more. All running in your browser.

Explore All Tools