CSS Grid
Sinau carane ngaktifake, nggunakake, lan ngatur sistem tata letak alternatif sing dibangun ing CSS Grid kanthi conto lan potongan kode.
Sistem kothak standar Bootstrap nggambarake puncak saka luwih saka sepuluh taun teknik tata letak CSS, dicoba lan diuji dening mayuta-yuta wong. Nanging, uga digawe tanpa akeh fitur lan teknik CSS modern sing kita deleng ing browser kaya Grid CSS anyar.
Cara kerjane
Kanthi Bootstrap 5, kita wis nambahake pilihan kanggo ngaktifake sistem kothak kapisah sing dibangun ing CSS Grid, nanging kanthi corak Bootstrap. Sampeyan isih entuk kelas sing bisa ditrapake kanthi cepet kanggo mbangun tata letak responsif, nanging kanthi pendekatan sing beda ing sangisore hood.
-
CSS Grid iku opt-in. Pateni sistem kothak standar kanthi nyetel
$enable-grid-classes: false
lan aktifake Grid CSS kanthi nyetel$enable-cssgrid: true
. Banjur, ngumpulake maneh Sass sampeyan. -
Ganti conto
.row
karo.grid
. Kelas.grid
nyeteldisplay: grid
lan nggawegrid-template
sing sampeyan mbangun karo HTML. -
Ganti
.col-*
kelas karo.g-col-*
kelas. Iki amarga kolom CSS Grid kita nggunakakegrid-column
properti tinimbangwidth
. -
Kolom lan ukuran talang disetel liwat variabel CSS. Setel iki ing wong tuwa
.grid
lan setel apa wae sing dikarepake, kanthi baris utawa ing lembar gaya, nganggo--bs-columns
lan--bs-gap
.
Ing mangsa ngarep, Bootstrap kamungkinan bakal pindhah menyang solusi hibrida amarga gap
properti wis entuk dhukungan browser meh lengkap kanggo flexbox.
prabédan utama
Dibandhingake karo sistem grid standar:
-
Utilitas fleksibel ora mengaruhi kolom Grid CSS kanthi cara sing padha.
-
Gaps ngganti talang. Properti
gap
kasebut ngganti horisontalpadding
saka sistem kothak standar lan fungsine luwih kayamargin
. -
Nalika kuwi, Boten kados
.row
s,.grid
s ora wates negatif lan keperluan wates ora bisa digunakake kanggo ngganti talang kothak. Kesenjangan kothak ditrapake sacara horisontal lan vertikal kanthi standar. Deleng bagean kustomisasi kanggo rincian liyane. -
Gaya inline lan adat kudu dideleng minangka panggantos kanggo kelas modifier (contone,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Nesting bisa uga padha, nanging bisa uga mbutuhake sampeyan ngreset jumlah kolom ing saben conto nested
.grid
. Deleng bagean nesting kanggo rincian.
Tuladha
Telung kolom
Telung kolom kanthi jembar sing padha ing kabeh tampilan lan piranti bisa digawe kanthi nggunakake .g-col-4
kelas kasebut. Tambah kelas responsif kanggo ngganti tata letak kanthi ukuran viewport.
<div class="grid">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
Responsif
Gunakake kelas responsif kanggo nyetel tata letak ing viewports. Kene kita miwiti karo rong kolom ing viewports sempit, lan banjur tuwuh dadi telung kolom ing viewports medium lan ndhuwur.
<div class="grid">
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>
Bandhingake karo tata letak rong kolom iki ing kabeh viewports.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Bungkus
Item kothak kanthi otomatis mbungkus menyang baris sabanjure nalika ora ana papan maneh kanthi horisontal. Elinga yen gap
iki ditrapake kanggo kesenjangan horisontal lan vertikal antarane item kothak.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
diwiwiti
Kelas wiwitan ngarahake ngganti kelas offset kothak standar, nanging ora kabeh padha. CSS Grid nggawe cithakan kothak liwat gaya sing ngandhani browser supaya "miwiti kolom iki" lan "pungkasan ing kolom iki." Sifat-sifat kasebut yaiku grid-column-start
lan grid-column-end
. Kelas wiwitan minangka singkatan kanggo mantan. Pasangake karo kelas kolom kanggo ukuran lan selarasake kolom sampeyan nanging sampeyan butuhake. Kelas wiwitan diwiwiti 1
kanthi 0
nilai sing ora valid kanggo properti kasebut.
<div class="grid">
<div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
<div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>
kolom otomatis
Nalika ora ana kelas ing item kothak (anak langsung saka a .grid
), saben item kothak kanthi otomatis ukuran siji kolom.
<div class="grid">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
Prilaku iki bisa dicampur karo kelas kolom kothak.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
nyarang
Padha karo sistem kothak gawan kita, CSS Grid ngidini kanggo gampang nesting .grid
s. Nanging, ora kaya standar, kothak iki nduweni owah-owahan ing baris, kolom, lan kesenjangan. Coba conto ing ngisor iki:
- Kita ngganti nomer standar kolom kanthi variabel CSS lokal:
--bs-columns: 3
. - Ing kolom otomatis pisanan, jumlah kolom diwarisake lan saben kolom minangka siji-katelu saka jembar sing kasedhiya.
- Ing kolom otomatis kapindho, kita wis ngreset count kolom ing nested
.grid
kanggo 12 (standar kita). - Kolom otomatis nomer telu ora duwe konten bersarang.
Ing praktik, iki ngidini tata letak sing luwih rumit lan khusus yen dibandhingake karo sistem kothak standar.
<div class="grid" style="--bs-columns: 3;">
<div>
First auto-column
<div class="grid">
<div>Auto-column</div>
<div>Auto-column</div>
</div>
</div>
<div>
Second auto-column
<div class="grid" style="--bs-columns: 12;">
<div class="g-col-6">6 of 12</div>
<div class="g-col-4">4 of 12</div>
<div class="g-col-2">2 of 12</div>
</div>
</div>
<div>Third auto-column</div>
</div>
Ngatur
Kustomisasi jumlah kolom, jumlah larik, lan jembar celah kanthi variabel CSS lokal.
Variabel | Nilai mundur | Katrangan |
---|---|---|
--bs-rows |
1 |
Jumlah baris ing cithakan kothak sampeyan |
--bs-columns |
12 |
Jumlah kolom ing cithakan kothak sampeyan |
--bs-gap |
1.5rem |
Ukuran celah antarane kolom (vertikal lan horisontal) |
Variabel CSS iki ora duwe nilai standar; tinimbang, padha aplikasi Nilai fallback sing digunakake nganti Kayata lokal kasedhiya. Contone, kita nggunakake var(--bs-rows, 1)
kanggo baris Grid CSS kita, kang nglirwakake --bs-rows
amarga sing durung disetel ing ngendi wae. Yen wis ana, .grid
conto kasebut bakal nggunakake nilai kasebut tinimbang nilai mundur saka 1
.
Ora ana kelas grid
Elemen anak langsung .grid
yaiku item kothak, supaya ukurane tanpa nambah .g-col
kelas kanthi jelas.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Kolom lan longkangan
Nyetel jumlah kolom lan longkangan.
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
<div class="g-col-2">.g-col-2</div>
<div class="g-col-2">.g-col-2</div>
</div>
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-4">.g-col-4</div>
</div>
Nambahake larik
Nambahake baris liyane lan ngganti panggonan kolom:
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
<div>Auto-column</div>
<div class="g-start-2" style="grid-row: 2">Auto-column</div>
<div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>
gaps
Ngganti kesenjangan vertikal mung kanthi ngowahi row-gap
. Elinga yen kita nggunakake gap
ing .grid
s, nanging row-gap
lan column-gap
bisa diowahi minangka needed.
<div class="grid" style="row-gap: 0;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Amarga iku, sampeyan bisa duwe beda vertikal lan horisontal gap
s, kang bisa njupuk siji Nilai (kabeh sisih) utawa pasangan nilai (vertikal lan horisontal). Iki bisa diterapake nganggo gaya inline kanggo gap
, utawa karo --bs-gap
variabel CSS kita.
<div class="grid" style="--bs-gap: .25rem 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Sass
Siji watesan saka Grid CSS yaiku kelas standar kita isih digawe dening rong variabel Sass, $grid-columns
lan $grid-gutter-width
. Iki kanthi efektif nemtokake jumlah kelas sing digawe ing CSS sing dikompilasi. Sampeyan duwe rong pilihan ing kene:
- Owahi variabel Sass standar kasebut lan kompilasi maneh CSS sampeyan.
- Gunakake inline utawa gaya khusus kanggo nambah kelas sing kasedhiya.
Contone, sampeyan bisa nambah count kolom lan ngganti ukuran longkangan, banjur ukuran "kolom" karo campuran saka gaya inline lan kelas kolom CSS Grid sing wis ditemtokake (contone, .g-col-4
).
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
<div style="grid-column: span 14;">14 columns</div>
<div class="g-col-4">.g-col-4</div>
</div>