CSS Grid Layout
·
Studio
Presets
Reference
Explain
Share
Reset
Preview · 6 blocks
PREVIEW
drag to reorder · click cell to edit
1
Cell 1
2
Cell 2
3
Cell 3
4
Cell 4
5
Cell 5
6
Cell 6
cols
repeat(3, 1fr)
rows
auto
gap
16/16px
flow
row
⌘
[
sidebar
⌘
E
explain
⌘
J
code
Code
Reference
Core Concepts
Grid Container
The element that establishes the grid context
Grid Item
Direct children of a grid container
Explicit vs Implicit Grid
Defined tracks vs auto-generated tracks
Tracks & Lines
The building blocks of a grid
Properties
grid-template-columns
Defines column track sizes
grid-template-rows
Defines row track sizes
grid-template-areas
Name regions of the grid with strings
gap
Space between tracks
grid-auto-flow
Controls how auto-placed items fill the grid
grid-auto-columns / grid-auto-rows
Size of implicitly created tracks
align-items
Aligns grid items along the block axis
justify-items
Aligns grid items along the inline axis
justify-content
Distributes grid tracks along the inline axis
align-content
Distributes grid tracks along the block axis
subgrid
Inherits track sizing from parent grid
masonry
Pinterest-style packing layout (experimental)