CSS Grid Playground
Experiment with every CSS Grid property in real time โ see the result and copy the CSS.
Container Properties
grid-template-columns
grid-template-rows
gap
justify-items
align-items
Items
Generated CSS
What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system that lets you define rows and columns with precise control over how content fills them. Unlike Flexbox (which is one-dimensional), Grid lets you position items along both axes simultaneously โ making it ideal for page-level layouts, image galleries, dashboards, and any design that requires both row and column alignment.
Key concepts include grid-template-columns and grid-template-rows to define the track sizes, gap for spacing, and the powerful fr unit for fractional space distribution. The repeat() and minmax() functions enable responsive grids that adapt without media queries.
How to Use
- Click a preset button for any property โ the grid preview updates instantly.
- Type a custom value in the grid-template-columns input field for full control.
- Adjust item count to see how the grid flows with more or fewer items.
- The generated CSS is shown below the preview. Click โฟป Copy CSS to copy it.
Frequently Asked Questions
The
fr unit stands for "fraction" โ it distributes the remaining available space proportionally. In grid-template-columns: 1fr 2fr 1fr, the middle column gets twice as much space as each side column. It's similar to flex-grow in Flexbox. Unlike percentage values, fr columns account for gap spacing automatically.repeat(auto-fill, minmax(120px, 1fr)) creates as many columns as will fit, each at least 120px wide, growing to fill available space. This creates a fully responsive grid without any media queries โ it adapts automatically to the container width. auto-fill keeps empty tracks; auto-fit collapses them.No. Everything runs entirely in your browser. Nothing is sent to any server.