CSS Grid

O le fa'aogaina o le fa'aogaina o le faiga o le fa'asologa o le Bootstrap o lo'o fa'atusalia ai le fa'ai'uga o le sili atu ma le sefulu tausaga o faiga fa'atulagaina CSS, fa'ata'ita'iina ma fa'ata'ita'iina e le faitau miliona o tagata. Ae, na faia foi e aunoa ma le tele o foliga CSS faʻaonaponei ma metotia o loʻo tatou vaʻaia i suʻesuʻega e pei o le CSS Grid fou.

E faapefea ona galue

Fa'atasi ai ma le Bootstrap 5, ua matou fa'aopoopoina le filifiliga e mafai ai ona tu'u se isi fa'asologa o faiga e fausia i luga o le CSS Grid, ae fa'atasi ai ma le mimilo Bootstrap. E te maua pea vasega e mafai ona e faʻaoga i luga o se manaʻoga e fausia ai faʻatulagaga tali, ae faʻatasi ai ma se auala ese i lalo o le pulou.

• CSS Grid ua filifili i totonu. Fa'agata le fa'aogaina o le fa'aogaina o le fa'aogaina $enable-grid-classes: falsema fa'aaga le CSS Grid e ala i le fa'atulagaina $enable-cssgrid: true. Ona, toe faʻapipiʻi lau Sass.

• Sui tulaga o .rowle .grid. O le .gridvasega e seti display: gridma fatuina se grid-templatemea e te fausia i luga i lau HTML.

• Sui .col-*vasega i .g-col-*vasega. E mafua ona o matou CSS Grid koluma e faʻaaogaina le grid-columnmeatotino nai lo le width.

• O koluma ma le tele o alavai e fa'atulaga e ala i fesuiaiga CSS. Seti nei mea i luga o le matua .gridma fa'avasega i le mea e te mana'o ai, i totonu po'o totonu o se sitaili, fa'atasi --bs-columnsma le --bs-gap.

I le lumanaʻi, e foliga mai o le a suia Bootstrap i se fofo faʻapipiʻi ona gapua ausia e le meatotino toetoe lava atoa le lagolago suʻesuʻe mo le flexbox.

Eseesega autu

Fa'atusatusa i le fa'aogaina o le fa'asologa fa'asologa:

• E le a'afia ai koluma CSS Grid i le auala lava e tasi.

• E suitulaga va i alavai. E gapsui e le meatotino le fa'alava paddingmai la tatou faiga fa'asologa fa'aletonu ma e sili atu ona galue e pei o margin.

• O lea la, e le pei o .rowle s, .gride leai ni fa'ailoga leaga ma e le mafai ona fa'aoga mea fa'aoga e sui ai alavai. E fa'aoga fa'alava ma tu'usa'o va'a fa'alava. Va'ai le vaega fa'apitoa mo nisi fa'amatalaga.

• E tatau ona va'aia sitaili i totonu ma aga masani e suitulaga mo vasega fa'aleleia (fa'ata'ita'iga, style="--bs-columns: 3;"vs class="row-cols-3").

• E fa'apena fo'i le fa'aogaina o le fa'aputuga, ae atonu e mana'omia oe e toe fa'afo'i lau koluma i fa'ata'ita'iga ta'itasi o se fa'aputuga .grid. Va'ai le vaega faamoega mo fa'amatalaga.

Faataitaiga

E tolu koluma

E tolu koluma tutusa-lautele i va'aiga uma ma masini e mafai ona faia e ala i le fa'aogaina o .g-col-4vasega. Fa'aopoopo vasega talileleia e sui ai le fa'atulagaina i le tele o le va'aiga.

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

Talia

Fa'aoga vasega talileleia e fetuutuunai ai lau fa'atulagaina i va'aiga va'aiga. O iinei tatou te amata ai i ni koluma se lua i luga o va'aiga vaapiapi, ona fa'atupuina lea i ni koluma se tolu i luga ole va'aiga va'aia ma luga.

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

Fa'atusatusa lena mea i le fa'atulagaina o koluma nei e lua i va'aiga uma.

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

afifiina

E otometi lava ona afifi mea fa'aala i le isi laina pe a leai se avanoa fa'alava. Manatua e gapfa'atatau i va fa'alava ma vasa i le va o mea fa'avasega.

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

Amata

Amata vasega e fa'amoemoe e sui a matou vasega fa'aletonu o le grid's offset, ae e le tutusa uma. CSS Grid e fatuina se faʻataʻitaʻiga faʻasologa e ala i sitaili e taʻu atu i tagata suʻesuʻe e "amata i lenei koluma" ma "faaiʻu i lenei koluma." O na meatotino o grid-column-startma grid-column-end. Amata vasega e faapuupuu mo le muamua. Fa'atasi i latou i vasega koluma i le lapopoa ma fa'aoga au koluma tusa lava pe e te mana'omia. Amata vasega amata ile 1tau 0le aoga mo nei meatotino.

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

Koluma ta'avale

A leai ni vasega i luga o mea fa'asologa (o tamaiti vave a le .grid), o mea ta'itasi fa'asologa o le a otometi lava ona lapopoa i le tasi koluma.

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

O lenei amio e mafai ona fa'afefiloi ma vasega koluma laina.

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

Faamoega

E tutusa ma la tatou faiga fa'asologa fa'aletonu, o la tatou CSS Grid e mafai ai ona fa'anofo faigofie o .grids. Ae ui i lea, e le pei o le faaletonu, o lenei faasologa e maua ai suiga i laina, koluma, ma va. Mafaufau i le faataitaiga o loo i lalo:

• Matou te fa'aogaina le numera fa'aletonu o koluma ma se fesuiaiga CSS fa'apitonu'u: --bs-columns: 3.
• I le koluma-auto muamua, o le numera o koluma e tuufaasolo ma o koluma taitasi o le tasi vaetolu o le lautele avanoa.
• I le koluma-auto lona lua, ua matou toe setiina le numera o le koluma i luga o le ofaga .gridi le 12 (o matou faaletonu).
• O le koluma-auto lona tolu e leai ni mea e teu ai.

I le fa'ata'ita'iga e mafai ai e lenei mea ona fa'aogaina fa'asologa fa'apitoa ma fa'aleaganu'u pe a fa'atusatusa i la tatou faiga fa'asologa fa'aletonu.

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

Fa'asinomaga

Fa'asinomaga le numera o koluma, le numera o laina, ma le lautele o va ma fesuiaiga CSS fa'apitonu'u.

O nei fesuiaiga CSS e leai se tau fa'aletonu; nai lo lena, latou te fa'aogaina tulaga fa'afo'i e fa'aaogaina se'ia tu'uina atu se fa'alotoifale. Mo se faʻataʻitaʻiga, matou te faʻaogaina var(--bs-rows, 1)mo la matou CSS Grid rows, lea e le amanaʻia --bs-rowsona e leʻi faʻatulagaina i soʻo se mea. A oʻo loa, o le .grida faʻaaogaina e le faʻataʻitaʻiga lena tau nai lo le tau faʻafoʻi o le 1.

Leai ni vasega fa'asologa

O elemene a tamaiti vave o .gridmea fa'asologa, ina ia fa'avasegaina e aunoa ma le fa'aopoopoina manino o se .g-colvasega.

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

Koluma ma va

Fetuuna'i le numera o koluma ma le va.

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

Faaopoopo laina

Fa'aopoopo isi laina ma suia le tu'uga o koluma:

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

Vava

Suia le va sa'o i le na'o le suia o le row-gap. Manatua matou te faʻaogaina gapi luga o .gridle s, ae row-gape column-gapmafai ona suia pe a manaʻomia.

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

Ona o lena mea, e mafai ona e maua ni gaps tu'usa'o ma fa'alava, lea e mafai ona ave se tau se tasi (itu uma) po'o se pea o tau (tutusa ma fa'alava). E mafai ona fa'aoga i se sitaili fa'a-inline mo gap, po'o le tatou --bs-gapCSS fesuiaiga.

<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

E tasi le tapula'a o le CSS Grid o lo'o fa'atupu pea a tatou vasega fa'aletonu e lua Sass fesuiaiga, $grid-columnsma $grid-gutter-width. Ole mea lea e fa'atulaga lelei ai le aofa'i o vasega na fa'atupuina ile matou CSS tu'ufa'atasia. E lua au filifiliga iinei:

• Suia na suiga faaletonu Sass ma toe tuufaatasia lau CSS.
• Fa'aoga sitaili i totonu po'o sitaili masani e fa'aopoopo ai vasega ua saunia.

Mo se fa'ata'ita'iga, e mafai ona e fa'ateleina le aofa'i o le koluma ma sui le tele o le va, ona fa'atele lea o au "koluma" fa'atasi ai ma se fa'afefiloi o sitaili i totonu ma vasega CSS Grid koluma fa'ata'ita'i (fa'ata'ita'iga, .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>