CSS Tools
CSS Grid Generator
Build grid layouts visually. Set columns, rows, and gaps, choose equal or custom column templates, and copy the generated CSS.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
column-gap: 12px;
row-gap: 12px;
}CSS Grid essentials
A grid container defines columns with grid-template-columns and rows with grid-template-rows. The fr unit distributes available space proportionally. gap sets spacing between tracks.
display: grid;grid-template-columns: repeat(3, 1fr);grid-template-columns: 200px 1fr auto;gap: 16px;Frequently asked questions
What is CSS Grid?
CSS Grid is a two-dimensional layout system. It places items into rows and columns defined by the container, unlike flexbox which works in one direction at a time.
What does 1fr mean?
fr stands for 'fraction unit'. It represents a fraction of the available space in the grid container. Three 1fr columns means each column takes one-third of the width.
What is repeat()?
repeat(3, 1fr) is shorthand for 1fr 1fr 1fr. It repeats a track definition a number of times.
When should I use grid vs flexbox?
Use grid for two-dimensional layouts where you need precise control over both rows and columns. Use flexbox for one-dimensional flows like navigation bars, card rows, or button groups.