CSS-rooster

Bootstrap se verstekroosterstelsel verteenwoordig die hoogtepunt van meer as 'n dekade van CSS-uitlegtegnieke, beproef en getoets deur miljoene mense. Maar dit is ook geskep sonder baie van die moderne CSS-kenmerke en -tegnieke wat ons in blaaiers soos die nuwe CSS Grid sien.

Hoe dit werk

Met Bootstrap 5 het ons die opsie bygevoeg om 'n aparte roosterstelsel te aktiveer wat op CSS Grid gebou is, maar met 'n Bootstrap-draai. Jy kry steeds klasse wat jy op 'n gril kan toepas om responsiewe uitlegte te bou, maar met 'n ander benadering onder die enjinkap.

• CSS Grid is intekening. Deaktiveer die verstek roosterstelsel deur in te stel $enable-grid-classes: falseen aktiveer die CSS Grid deur te stel $enable-cssgrid: true. Stel dan jou Sass saam.

• Vervang gevalle van .rowmet .grid. Die .gridklas stel display: griden skep 'n grid-templatewaarop jy met jou HTML bou.

• Vervang .col-*klasse met .g-col-*klasse. Dit is omdat ons CSS Grid-kolomme die grid-columneiendom gebruik in plaas van width.

• Kolomme en geutgroottes word gestel via CSS-veranderlikes. Stel dit op die ouer .griden pasmaak soos jy wil, inlyn of in 'n stylblad, met --bs-columnsen --bs-gap.

In die toekoms sal Bootstrap waarskynlik oorskakel na 'n hibriede oplossing, aangesien die gapeiendom byna volledige blaaierondersteuning vir flexbox bereik het.

Sleutel verskille

In vergelyking met die standaard roosterstelsel:

• Flex-hulpprogramme beïnvloed nie die CSS Grid-kolomme op dieselfde manier nie.

• Gapings vervang geute. Die gapeiendom vervang die horisontale paddingvan ons verstek roosterstelsel en funksioneer meer soos margin.

• As sodanig, anders as .rows, .gridhet s geen negatiewe marges nie en kan marge-nutsdienste nie gebruik word om die roostergeute te verander nie. Roostergapings word by verstek horisontaal en vertikaal toegepas. Sien die pasmaakafdeling vir meer besonderhede.

• Inlyn- en pasgemaakte style moet beskou word as plaasvervangers vir wysigerklasse (bv. style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting werk soortgelyk, maar kan vereis dat jy jou kolomtellings op elke geval van 'n geneste .grid. Sien die nesafdeling vir besonderhede.

Voorbeelde

Drie kolomme

Drie kolomme met gelyke breedte oor alle uitsigpoorte en toestelle kan geskep word deur die .g-col-4klasse te gebruik. Voeg responsiewe klasse by om die uitleg volgens viewport-grootte te verander.

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

Responsief

Gebruik responsiewe klasse om jou uitleg oor kykpoorte heen aan te pas. Hier begin ons met twee kolomme op die smalste uitsigpoorte, en groei dan tot drie kolomme op medium uitsigpoorte en hoër.

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

Vergelyk dit met hierdie tweekolom-uitleg by alle uitsigpoorte.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Toedraai

Roosteritems draai outomaties na die volgende reël wanneer daar nie meer ruimte horisontaal is nie. Let daarop dat die van gaptoepassing is op horisontale en vertikale gapings tussen roosteritems.

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

Begin

Beginklasse poog om ons verstekrooster se verrekenklasse te vervang, maar hulle is nie heeltemal dieselfde nie. CSS Grid skep 'n roostersjabloon deur style wat blaaiers vertel om "by hierdie kolom te begin" en "einde by hierdie kolom." Daardie eiendomme is grid-column-starten grid-column-end. Beginklasse is kortskrif vir eersgenoemde. Koppel hulle met die kolomklasse volgens grootte en pas jou kolomme net soos jy nodig het. Beginklasse begin by 1soos 0'n ongeldige waarde vir hierdie eiendomme is.

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

Outomatiese kolomme

Wanneer daar geen klasse op die roosteritems is nie (die onmiddellike kinders van 'n .grid), sal elke roosteritem outomaties na een kolom gegrootte word.

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

Hierdie gedrag kan gemeng word met roosterkolomklasse.

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

Nestel

Soortgelyk aan ons verstek roosterstelsel, maak ons ​​CSS Grid voorsiening vir maklike nes van .grids. In teenstelling met die verstek, erf hierdie rooster egter veranderinge in die rye, kolomme en gapings. Oorweeg die voorbeeld hieronder:

• Ons ignoreer die verstek aantal kolomme met 'n plaaslike CSS-veranderlike: --bs-columns: 3.
• In die eerste outo-kolom word die kolomtelling geërf en elke kolom is een derde van die beskikbare breedte.
• In die tweede outo-kolom het ons die kolomtelling op die geneste teruggestel .gridna 12 (ons verstek).
• Die derde outokolom het geen geneste inhoud nie.

In die praktyk maak dit voorsiening vir meer komplekse en pasgemaakte uitlegte in vergelyking met ons verstekroosterstelsel.

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

Pasmaak

Pas die aantal kolomme, die aantal rye en die breedte van die gapings aan met plaaslike CSS-veranderlikes.

Hierdie CSS-veranderlikes het geen verstekwaarde nie; in plaas daarvan pas hulle terugvalwaardes toe wat gebruik word totdat 'n plaaslike instansie verskaf word. Ons gebruik byvoorbeeld var(--bs-rows, 1)vir ons CSS Grid-rye, wat ignoreer --bs-rowsomdat dit nog nêrens ingestel is nie. Sodra dit is, .gridsal die instansie daardie waarde gebruik in plaas van die terugvalwaarde van 1.

Geen roosterklasse nie

Onmiddellike kinderelemente van .gridis roosteritems, so hulle sal grootte wees sonder om eksplisiet 'n .g-colklas by te voeg.

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

Kolomme en gapings

Pas die aantal kolomme en die gaping aan.

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

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

Voeg rye by

Voeg meer rye by en verander die plasing van kolomme:

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

Gapings

Verander die vertikale gapings slegs deur die row-gap. Let daarop dat ons gapop .grids gebruik, maar row-gapen column-gapkan verander word soos nodig.

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

As gevolg hiervan kan jy verskillende vertikale en horisontale gaps hê, wat 'n enkele waarde (alle kante) of 'n paar waardes (vertikaal en horisontaal) kan neem. Dit kan toegepas word met 'n inlynstyl vir gap, of met ons --bs-gapCSS-veranderlike.

<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

Een beperking van die CSS Grid is dat ons verstek klasse steeds gegenereer word deur twee Sass veranderlikes, $grid-columnsen $grid-gutter-width. Dit bepaal effektief die aantal klasse wat in ons saamgestelde CSS gegenereer word. Jy het twee opsies hier:

• Verander daardie verstek Sass veranderlikes en hersaamstel jou CSS.
• Gebruik inlyn- of pasgemaakte style om die verskafde klasse aan te vul.

Byvoorbeeld, jy kan die kolomtelling verhoog en die gapingsgrootte verander, en dan jou "kolomme" grootte maak met 'n mengsel van inlynstyle en voorafbepaalde CSS Grid-kolomklasse (bv. .g-col-4).

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