Rows × cols
3 × 3
Template
repeat(3, 1fr)
Design Tools
CSS Grid Generator — Rows, Columns, and Gaps
Set column and row counts plus gaps to generate a basic display:grid layout. Preview the track structure, try quick templates, and copy CSS or HTML for admin layouts and card grids.
CSSGridLayout
Quick switch:Flexbox Generator
Favorite this tool
No favorite storage mode has been selected.
Quick actions
Copy this tool URL or open the system share sheet on a supported device.
设计配色
CSS Grid Generator
3
3
3 × 3 网格
.grid {
display: grid;
} Use cases
- Draft an equal-column card grid
- Scaffold an admin page grid
- Confirm column count and gap values quickly
How to use
- Set columns, rows, and gaps
- Preview the grid structure
- Copy the generated CSS or HTML
Example input and output
FAQ
Does it support named grid areas?
It focuses on basic track setup (often equal 1fr tracks). Complex grid-area maps still need hand-written CSS.
Tools
Related tools
Continue with another translated tool for a nearby task.
Flexbox Generator
Flexbox Generator — Visual One-Dimensional Layout
Tune flex-direction, justify-content, align-items, wrap, and gap with a live preview. Add or remove boxes to see wrapping and spacing, then copy the generated CSS (and HTML scaffold) into your project.
Design CSS Layout