CSS Grid

Sistem grid standar Bootstrap ngagambarkeun culmination tina leuwih dasawarsa téhnik perenah CSS, diusahakeun tur diuji ku jutaan jalma. Tapi, éta ogé diciptakeun tanpa seueur fitur sareng téknik CSS modern anu urang tingali dina panyungsi sapertos CSS Grid énggal.

Kumaha gawéna

Kalayan Bootstrap 5, kami parantos nambihan pilihan pikeun ngaktifkeun sistem grid anu misah anu diwangun dina CSS Grid, tapi kalayan pulas Bootstrap. Anjeun masih meunang kelas anjeun bisa nerapkeun dina whim ngawangun layouts responsif, tapi ku pendekatan béda handapeun tiung.

• CSS Grid nyaéta opt-in. Pareuman sistem grid standar ku netepkeun $enable-grid-classes: falsesareng aktipkeun CSS Grid ku netepkeun $enable-cssgrid: true. Lajeng, recompile Sass Anjeun.

• Ganti instansi tina .rowkalawan .grid. Kelas .gridnyetél display: gridsareng nyiptakeun grid-templateanu anjeun ngawangun sareng HTML anjeun.

• Ganti .col-*kelas ku .g-col-*kelas. Ieu kusabab kolom CSS Grid kami nganggo grid-columnharta gaganti width.

• Kolom sareng ukuran talang diatur via variabel CSS. Setel ieu dina indungna .gridsareng saluyukeun kumaha anjeun hoyong, inline atanapi dina stylesheet, nganggo --bs-columnssareng --bs-gap.

Dina mangsa nu bakal datang, Bootstrap dipikaresep bakal mindahkeun kana solusi hibrid sabab gapharta geus ngahontal rojongan browser ampir pinuh pikeun flexbox.

Bedana konci

Dibandingkeun sareng sistem grid standar:

• Utiliti Flex henteu mangaruhan kolom CSS Grid dina cara anu sami.

• Gap ngaganti talang. Harta gapngagentos horisontal paddingtina sistem grid standar urang sareng fungsina langkung mirip margin.

• Sapertos kitu, Teu kawas .rows, .grids euweuh margins négatip sarta Utiliti margin teu bisa dipaké pikeun ngarobah talang grid. Jurang grid diterapkeun sacara horisontal sareng vertikal sacara standar. Tempo bagian ngaropéa pikeun leuwih rinci.

• Inline jeung gaya custom kudu ditempo salaku gaganti pikeun kelas modifier ( misalna style="--bs-columns: 3;"vs.class="row-cols-3"

• Nyarang tiasa dianggo sami, tapi panginten anjeun kedah ngareset jumlah kolom anjeun dina unggal conto tina .grid. Tempo bagian nyarang pikeun detil.

Contona

Tilu kolom

Tilu kolom lebar anu sami dina sadaya viewports sareng alat tiasa didamel ku ngagunakeun .g-col-4kelas. Tambahkeun kelas responsif pikeun ngarobah tata perenah ku 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

Anggo kelas responsif pikeun nyaluyukeun perenah anjeun dina viewports. Di dieu urang mimitian ku dua kolom dina viewports narrowest, lajeng tumuwuh nepi ka tilu kolom on viewports sedeng jeung luhur.

<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>

Bandingkeun kana dua perenah kolom ieu dina sagala 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 grid otomatis mungkus ka baris salajengna lamun euweuh deui rohangan horisontal. Catet yén éta gapmanglaku ka sela horisontal sareng vertikal antara item grid.

<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>

Dimimitian

Kelas ngamimitian tujuanana pikeun ngagentos kelas offset grid standar urang, tapi aranjeunna henteu sadayana sami. CSS Grid nyiptakeun template grid ngaliwatan gaya nu ngabejaan browser pikeun "mimitian dina kolom ieu" jeung "tungtung dina kolom ieu." Éta sipat téh grid-column-startjeung grid-column-end. Mimitian kelas téh shorthand pikeun urut. Masangkeun aranjeunna sareng kelas kolom pikeun ukuran sareng align kolom anjeun kumaha waé anu anjeun peryogikeun. Mimitian kelas dimimitian dina 1salaku 0nilai teu valid pikeun sipat ieu.

<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

Lamun euweuh kelas dina item grid (barudak saharita a .grid), unggal item grid bakal otomatis jadi ukuran hiji 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>

kabiasaan ieu bisa dicampurkeun jeung kelas kolom grid.

<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

Sarupa jeung sistem grid standar kami, kami CSS Grid ngamungkinkeun pikeun gampang nyarang .grids. Tapi, teu saperti standar, grid ieu inherits parobahan baris, kolom, jeung sela. Pertimbangkeun conto di handap ieu:

• Urang override jumlah standar kolom kalawan variabel CSS lokal: --bs-columns: 3.
• Dina kolom otomatis kahiji, jumlah kolom diwariskeun sareng unggal kolom mangrupikeun sapertilu tina lebar anu sayogi.
• Dina kolom otomatis kadua, kami geus ngareset count kolom dina nested .gridka 12 (standar kami).
• Kolom otomatis katilu teu aya eusi nested.

Dina prakna ieu ngamungkinkeun pikeun perenah anu langkung rumit sareng khusus upami dibandingkeun sareng sistem grid standar urang.

<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>

Nyaluyukeun

Sesuaikeun jumlah kolom, jumlah baris, sareng lebar sela sareng variabel CSS lokal.

Variabel CSS ieu teu boga nilai standar; tibatan, aranjeunna nerapkeun nilai fallback nu dipaké dugi conto lokal disadiakeun. Contona, urang make var(--bs-rows, 1)baris CSS Grid urang, nu ignores --bs-rowssabab nu teu acan disetel mana. Sakali éta, .gridconto bakal nganggo nilai éta tinimbang nilai fallback tina 1.

Taya kelas grid

Elemen barudak saharita .gridnyaéta barang-barang grid, ku kituna ukuranana bakal ukuranana tanpa sacara eksplisit nambahkeun .g-colkelas.

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Kolom jeung sela

Saluyukeun jumlah kolom sareng sela.

<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>

Nambahan baris

Nambahkeun langkung seueur baris sareng ngarobih panempatan 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>

sela-sela

Ngarobah celah nangtung ngan ku ngaropéa row-gap. Catet yén kami nganggo gapon .grids, tapi row-gapna column-gapbisa dirobah jadi diperlukeun.

<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>

Kusabab éta, anjeun tiasa gaduh s nangtung sarta horizontal béda gap, nu bisa nyandak hiji nilai tunggal (sagala sisi) atawa sapasang nilai (vertikal jeung horizontal). Ieu tiasa diterapkeun sareng gaya inline pikeun gap, atanapi sareng --bs-gapvariabel CSS kami.

<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

Hiji watesan tina CSS Grid nyaeta kelas standar urang masih dihasilkeun ku dua variabel Sass, $grid-columnssarta $grid-gutter-width. Ieu sacara efektif predetermines jumlah kelas dihasilkeun dina CSS kami disusun. Anjeun gaduh dua pilihan di dieu:

• Robah éta variabel Sass standar sareng kompilasi deui CSS anjeun.
• Anggo gaya inline atanapi khusus pikeun ningkatkeun kelas anu disayogikeun.

Salaku conto, anjeun tiasa ningkatkeun jumlah kolom sareng ngarobih ukuran jurang, teras ukuran "kolom" anjeun kalayan campuran gaya inline sareng kelas kolom CSS Grid anu tos siap (contona, .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>