Setiap sifat CSS grid yang biasa, dikumpulkan mengikut tempat ia digunakan: kontena, item, dan unit saiz. Setiap baris memadankan sifat dengan nilai biasanya.
Grid menyusun elemen dalam dua dimensi: baris dan lajur serentak. Tetapkan display: grid pada induk, takrifkan trek dengan grid-template-columns dan grid-template-rows, lalu letakkan anak ke dalam sel. Gunakan grid untuk susun atur halaman dan kad; gunakan flexbox untuk bar satu dimensi. Kedua-duanya boleh digabungkan dengan bebas.
Jadual rujukan · 33 entri
CSS GridExplained
33 of 33 rows
Kontena
grid | inline-grid
Mengubah elemen kepada kontena grid.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Mentakrifkan lajur dan lebarnya.
auto 1fr auto
Mentakrifkan baris dan tingginya.
[main-start] 1fr [main-end]
Menamakan garis grid dalam templat dan meletakkan item mengikut nama tersebut.
1rem | 8px 16px
Jarak antara baris dan lajur.
"header header" "nav main"
Menamakan sel supaya penempatan lebih mudah dibaca.
"head head" 64px "nav main" 1fr / 200px 1fr
Menetapkan baris, lajur, dan kawasan dalam satu ringkasan.
repeat(2, 1fr) / auto-flow 80px
Menetapkan setiap sifat trek dan grid-auto-flow dalam satu pengisytiharan.
minmax(80px, auto)
Menetapkan ketinggian baris yang tidak ditakrifkan oleh templat.
120px | minmax(0, 1fr)
Menetapkan lebar lajur yang tidak ditakrifkan oleh templat.
row | column | row dense
Memilih paksi untuk item yang tidak diletakkan; dense mengisi semula celah terdahulu.
start | center | end | stretch
Menjajarkan setiap item dalam selnya sepanjang paksi baris.
start | center | end | stretch
Menjajarkan setiap item dalam selnya sepanjang paksi lajur.
center | start end
Menetapkan align-items dan justify-items dalam satu pengisytiharan.
start | center | space-between
Menjajarkan grid trek dalam kontena sepanjang paksi baris.
start | center | space-between
Menjajarkan grid trek dalam kontena sepanjang paksi lajur.
center | end start
Menetapkan align-content dan justify-content dalam satu pengisytiharan.
Item
1 / 3 | span 2
Meletakkan atau merentangkan item merentas lajur.
1 / 2 | span 3
Meletakkan atau merentangkan item merentas baris.
grid-column: 2 / -1
Mengira garis dari hujung grid; -1 ialah garis terakhir.
header | 1 / 1 / 2 / 3
Menamakan atau meletakkan item sepenuhnya dalam satu ringkasan.
start | center | end | stretch
Menjajarkan item ini dalam selnya sepanjang paksi baris.
start | center | end | stretch
Menjajarkan item ini dalam selnya sepanjang paksi lajur.
center | start end
Menetapkan align-self dan justify-self dalam satu pengisytiharan.
Unit saiz
1fr | 2fr
Satu pecahan daripada ruang kosong dalam trek.
auto | 1fr auto
Mensaizkan trek mengikut kandungannya; penjajaran boleh meregangkannya.
min-content | max-content
Mensaizkan trek kepada kandungan terkecil atau terbesarnya.
fit-content(180px)
Mensaizkan trek mengikut kandungannya tetapi tidak melebihi had yang diberi.
minmax(200px, 1fr)
Mengehadkan trek antara minimum dan maksimum.
repeat(4, 1fr)
Mengulang corak trek tanpa menaip setiap satu.
repeat(auto-fit, minmax(120px, 1fr))
Menambah trek sebanyak yang muat; auto-fit meruntuhkan trek kosong.
grid-template-columns: subgrid
Membuat grid bersarang berkongsi trek dan nama garis induknya.
grid-template-rows: masonry
Eksperimental: memuatkan item ke dalam lajur mengikut ketinggian, bukan baris tetap.