in English

CSS Grid

Sinau carane ngaktifake, nggunakake, lan ngatur sistem tata letak alternatif sing dibangun ing CSS Grid kanthi conto lan potongan kode.

Ing kaca iki

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.

Heads up-sistem CSS Grid kita eksperimen lan opt-in wiwit v5.1.0! Kita kalebu ing CSS dokumentasi kita kanggo nduduhake kanggo sampeyan, nanging dipateni minangka standar. Tansah maca kanggo mangerteni carane ngaktifake ing proyek sampeyan.

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: falselan aktifake Grid CSS kanthi nyetel $enable-cssgrid: true. Banjur, ngumpulake maneh Sass sampeyan.
Ganti conto .rowkaro .grid. Kelas .gridnyetel display: gridlan nggawe grid-templatesing sampeyan mbangun karo HTML.
Ganti .col-*kelas karo .g-col-*kelas. Iki amarga kolom CSS Grid kita nggunakake grid-columnproperti tinimbang width.
Kolom lan ukuran talang disetel liwat variabel CSS. Setel iki ing wong tuwa .gridlan setel apa wae sing dikarepake, kanthi baris utawa ing lembar gaya, nganggo --bs-columnslan --bs-gap.

Ing mangsa ngarep, Bootstrap kamungkinan bakal pindhah menyang solusi hibrida amarga gapproperti 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 gapkasebut ngganti horisontal paddingsaka sistem kothak standar lan fungsine luwih kaya margin.
Nalika kuwi, Boten kados .rows, .grids 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;"vs class="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-4kelas kasebut. Tambah kelas responsif kanggo ngganti tata letak kanthi ukuran viewport.

.g-col-4

html

<div class="grid text-center">
  <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.

.g-col-6 .g-col-md-4

html

<div class="grid text-center">
  <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.

.g-col-6

html

<div class="grid text-center">
  <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 gapiki ditrapake kanggo kesenjangan horisontal lan vertikal antarane item kothak.

.g-col-6

html

<div class="grid text-center">
  <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-startlan 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 1kanthi 0nilai sing ora valid kanggo properti kasebut.

.g-col-3 .g-wiwitan-2

.g-col-4 .g-wiwitan-6

html

<div class="grid text-center">
  <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.

html

<div class="grid text-center">
  <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.

.g-col-6

html

<div class="grid text-center">
  <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 .grids. 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 .gridkanggo 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.

Kolom otomatis pisanan

Kolom otomatis

Kolom otomatis kapindho

6 saka 12

4 saka 12

2 saka 12

Kolom otomatis katelu

html

<div class="grid text-center" 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-rowsamarga sing durung disetel ing ngendi wae. Yen wis ana, .gridconto kasebut bakal nggunakake nilai kasebut tinimbang nilai mundur saka 1.

Ora ana kelas grid

Elemen anak langsung .gridyaiku item kothak, supaya ukurane tanpa nambah .g-colkelas kanthi jelas.

Kolom otomatis

html

<div class="grid text-center" 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.

.g-col-2

html

<div class="grid text-center" 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>

.g-col-6

.g-col-4

html

<div class="grid text-center" 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:

Kolom otomatis

html

<div class="grid text-center" 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 gaping .grids, nanging row-gaplan column-gapbisa diowahi minangka needed.

.g-col-6

html

<div class="grid text-center" 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 gaps, kang bisa njupuk siji Nilai (kabeh sisih) utawa pasangan nilai (vertikal lan horisontal). Iki bisa diterapake nganggo gaya inline kanggo gap, utawa karo --bs-gapvariabel CSS kita.

.g-col-6

html

<div class="grid text-center" 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-columnslan $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).

14 kolom

.g-col-4

html

<div class="grid text-center" 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>