Web Tools
Border
Shadow
Card
Font
Flexbox
Grid
Position
Gradient
Color
Transform
Filter
Text Effects
List
Animation
Button
Input
Table
Media Query
Clamp
Quote
Timeline
CSS Grid Tool
Mode
▼
Boxes
Page Layout
Number of Items
6
Select Layout
Holy Grail
Left Sidebar
Right Sidebar
Header + Main
3 Column
Card Grid
Dashboard
Magazine
Gallery
Grid Container
▼
Columns
e.g., 1fr 2fr 1fr, repeat(3, 1fr), 200px auto 1fr
Rows
e.g., auto 1fr auto, repeat(2, 100px), minmax(100px, auto)
Auto Columns
auto
1fr
min-content
max-content
minmax(100px, auto)
Auto Rows
auto
1fr
min-content
max-content
minmax(100px, auto)
Auto Flow
row
column
row dense
column dense
Alignment
▼
Justify Items
stretch
start
end
center
Align Items
stretch
start
end
center
Justify Content
start
end
center
stretch
space-between
space-around
space-evenly
Align Content
start
end
center
stretch
space-between
space-around
space-evenly
Gap
▼
Row Gap
10px
Column Gap
10px
Grid Item Properties
▼
Select Item
Grid Column Start
auto
1
2
3
4
5
Grid Column End
auto
2
3
4
5
-1 (last)
span 2
span 3
Grid Row Start
auto
1
2
3
4
5
Grid Row End
auto
2
3
4
5
-1 (last)
span 2
span 3
Justify Self
auto
start
end
center
stretch
Align Self
auto
start
end
center
stretch
Container Size
▼
Width
100%
auto
300px
500px
800px
Height
auto
100%
300px
400px
500px
100vh
Colors
▼
Container
Items
Page Background
Reset All
Generated CSS
Copy CSS