About This Tool
CSS Grid Generator creates a two-dimensional grid with equal tracks. Row and column counts must be integers from 1 to 12. The preview contains rows × columns items, up to a maximum of 144.
How to Use
- Enter Columns and Rows as integers from 1 to 12.
- Adjust Column Gap and Row Gap.
- View the live grid and numbered items.
- Copy CSS and apply it to your project's grid container.
Examples
- 3 columns × 2 rows displays 6 items.
- 12 columns × 12 rows reaches the tool's limit of 144 items.
- Set a 24px column gap and a 12px row gap to compare spacing in the two directions.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}How It Works & CSS Details
repeat(n, 1fr) creates n equal tracks, with 1fr allocating one share of the container's available space. column-gap and row-gap set spacing between columns and rows. When both gaps match, they can use the gap shorthand.
Common Uses
- Build card lists and image galleries.
- Plan dashboard layouts with equal tracks.
- Learn how repeat(), fr, and gap work.
Privacy
All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.
FAQ
How do CSS Grid and Flexbox differ?
Grid suits two-dimensional layouts that control rows and columns together. Flexbox distributes items primarily along one main axis.
What does 1fr mean?
fr represents a share of the remaining available space. When all tracks use 1fr, space is generally distributed equally.
What does repeat(3, 1fr) mean?
It is equivalent to 1fr 1fr 1fr and defines three equal tracks.
What is the difference between gap and margin?
gap sets space between grid tracks without adding space around the container's outer edge. margin is an element's own outer spacing.
Why are rows and columns limited to 12?
A limit of 12 in each direction keeps the preview at 144 items or fewer, preventing huge inputs from slowing down the page.