Grid Simulator
Mastering 2D Layouts
➕ Tambah Item (-)
Reset Semua
📦 Container (Parent)
Grid Template Columns
repeat(3, 1fr) -- (Dasar)
200px 1fr 1fr -- (Fixed vs fr)
repeat(4, 1fr)
min-content 1fr max-content -- (Intrinsic)
repeat(auto-fit, minmax(150px, 1fr)) -- (Magic!)
1fr 2fr 1fr
Grid Template Rows
auto (Implicit Rows)
repeat(3, 100px)
150px auto 100px
1fr 2fr (Butuh Container Fixed Height)
Gap
15px
Justify Items (Horiz)
stretch (Def)
start
end
center
Align Items (Vert)
stretch (Def)
start
end
center
Justify Content
start (Def)
end
center
space-between
space-around
space-evenly
Align Content
start (Def)
end
center
space-between
space-around
space-evenly
👶 Item (Child)
Reset Aktif
Pilih Item:
Grid Column
Line atau span
Grid Row
Line atau span
Justify Self
auto
stretch
start
end
center
Align Self
auto
stretch
start
end
center
💻 CSS Output
Container &
Item Terpilih
💡
Catatan Instruktur