Setiap properti CSS grid yang umum, dikelompokkan berdasarkan tempat penerapannya: kontainer, item, dan satuan ukuran. Setiap baris memasangkan properti dengan nilai-nilai umumnya.
Grid menata elemen dalam dua dimensi: baris dan kolom sekaligus. Setel display: grid pada induk, definisikan trek dengan grid-template-columns dan grid-template-rows, lalu tempatkan anak-anak ke dalam sel. Gunakan grid untuk tata letak halaman dan kartu; gunakan flexbox untuk bilah satu dimensi. Keduanya bebas dikombinasikan.
Tabel referensi · 33 entri
CSS GridExplained
33 of 33 rows
Kontainer
grid | inline-grid
Mengubah elemen menjadi kontainer grid.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Mendefinisikan kolom dan lebarnya.
auto 1fr auto
Mendefinisikan baris dan tingginya.
[main-start] 1fr [main-end]
Memberi nama pada garis grid dalam sebuah template dan menempatkan item berdasarkan nama tersebut.
1rem | 8px 16px
Jarak antara baris dan kolom.
"header header" "nav main"
Memberi nama pada sel agar penempatan lebih mudah dibaca.
"head head" 64px "nav main" 1fr / 200px 1fr
Mengatur baris, kolom, dan area dalam satu singkatan.
repeat(2, 1fr) / auto-flow 80px
Mengatur setiap properti trek dan grid-auto-flow dalam satu deklarasi.
minmax(80px, auto)
Mengatur tinggi baris yang tidak didefinisikan template.
120px | minmax(0, 1fr)
Mengatur lebar kolom yang tidak didefinisikan template.
row | column | row dense
Memilih poros untuk item yang tidak ditempatkan; dense mengisi kembali celah yang lebih awal.
start | center | end | stretch
Menyelaraskan setiap item di dalam selnya sepanjang poros baris.
start | center | end | stretch
Menyelaraskan setiap item di dalam selnya sepanjang poros kolom.
center | start end
Mengatur align-items dan justify-items dalam satu deklarasi.
start | center | space-between
Menyelaraskan grid trek di dalam kontainer sepanjang poros baris.
start | center | space-between
Menyelaraskan grid trek di dalam kontainer sepanjang poros kolom.
center | end start
Mengatur align-content dan justify-content dalam satu deklarasi.
Item
1 / 3 | span 2
Menempatkan atau membentangkan item melintasi kolom.
1 / 2 | span 3
Menempatkan atau membentangkan item melintasi baris.
grid-column: 2 / -1
Menghitung garis dari akhir grid; -1 adalah garis terakhir.
header | 1 / 1 / 2 / 3
Menamai atau menempatkan item sepenuhnya dalam satu singkatan.
start | center | end | stretch
Menyelaraskan satu item ini di dalam selnya sepanjang poros baris.
start | center | end | stretch
Menyelaraskan satu item ini di dalam selnya sepanjang poros kolom.
center | start end
Mengatur align-self dan justify-self dalam satu deklarasi.
Satuan ukuran
1fr | 2fr
Sebuah pecahan dari ruang kosong di dalam trek.
auto | 1fr auto
Mengukur trek berdasarkan isinya; perataan bisa meregangkannya.
min-content | max-content
Mengukur trek ke isi terkecil atau terbesarnya.
fit-content(180px)
Mengukur trek berdasarkan isinya tetapi tidak pernah melewati batas yang diberikan.
minmax(200px, 1fr)
Membatasi trek antara sebuah minimum dan maksimum.
repeat(4, 1fr)
Mengulang pola trek tanpa mengetiknya satu per satu.
repeat(auto-fit, minmax(120px, 1fr))
Menambah trek sebanyak yang muat; auto-fit menciutkan trek yang kosong.
grid-template-columns: subgrid
Membuat grid bersarang memakai trek dan nama garis induknya.
grid-template-rows: masonry
Eksperimental: memaketkan item ke kolom berdasarkan tinggi, bukan baris tetap.