CSS Grid Generator
Set column and row counts and the gap to instantly generate grid-template CSS with a preview
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Adjust the number of columns and rows and the gap between cells with sliders, and grid-template CSS is built on the spot alongside a live preview. Copy and paste it to create regular layouts (card lists, galleries, dashboards) without doing any of the math by hand.
How to use
- Enter the number of columns and rows to build the grid skeleton.
- Adjust the spacing between cells with the gap slider. To set horizontal and vertical gaps separately, uncheck 'same for both'.
- Check the cell layout in the preview, then copy the CSS below.
- Put child cards into the parent element you pasted it onto, and they'll be arranged in the grid automatically.
FAQ
- What does 1fr mean?
- fr stands for fraction, one piece of the leftover space divided evenly. repeat(3, 1fr) splits the parent width into three equal columns.
- How do I make the number of columns change automatically with screen size?
- Change grid-template-columns to repeat(auto-fit, minmax(200px, 1fr)) to get a responsive grid where the column count shrinks automatically as the width narrows. There's an example in the guidance text too.
- Can I trust the generated CSS as-is?
- It uses only standard CSS Grid properties, so it works as-is in modern browsers. Just note that the preview only shows sample cells, so treat actual content height and alignment as something to verify in your own project.