PBU´s CSS Grid Simulator
Grid-Tpl-Builder
no repeat
repeat( auto-fill,
repeat( auto-fit ,
repeat( 2 ,
repeat( 3 ,
repeat( 4 ,
min
200px
auto
min-content
max-content
fit-content(40%)
50px
100px
200px
300px
0.25fr
0.50fr
0.75fr
1.00fr
1.50fr
2.00fr
3.00fr
max
1.00fr
auto
min-content
max-content
fit-content(40%)
50px
100px
200px
300px
0.25fr
0.50fr
0.75fr
1.00fr
1.50fr
2.00fr
3.00fr
➕
C
R
x
+
11 items
+
1 item
grid-auto-flow
row
column
dense
dense row
dense column
grid-auto-columns
auto
minmax(auto, 300px)
minmax(min-content, 300px)
minmax(300px, 1fr ) -overflow
minmax(300px, auto) -overflow
minmax(max-content, 300px) -overflow
grid-template-columns
none (defaults to auto-cols)
repeat(auto-fill, minmax(300px, auto))
200px 1fr 2fr min-content
1fr 1fr
1fr 1fr 1fr
1fr 1fr 1fr 1fr
1fr 1fr 1fr 1fr 1fr
grid-auto-rows
auto
minmax(100px, auto)
minmax(auto, 360px)
grid-template-rows
none (defauts to auto-rows)
repeat(auto-fill, minmax(100px, auto))
repeat(auto-fill, minmax(100px, 1fr ))
1fr 1fr
1fr 1fr 1fr
1fr 1fr 1fr 1fr
1fr 1fr 1fr 1fr 1fr
1.5fr 0.5fr 1.5fr 0.5fr 1fr
justify-content
stretch
center
start
end
left
right
space-between
space-around
space-evenly
justify-items
stretch
center
start
end
left
right
align-content
stretch
center
start
baseline - only cross axis
end
left
right
space-between
space-around
space-evenly
align-items
stretch
center
start
baseline - only cross axis
end
left
right