CSS Grid
A'oa'o pe fa'apefea ona fa'agaoioi, fa'aoga, ma fa'avasega a tatou faiga fa'atulagaina e fau i luga ole CSS Grid fa'atasi ai ma fa'ata'ita'iga ma snippet code.
O le fa'aogaina o le fa'aogaina o faiga fa'asologa a 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 o lo'o filifili i totonu. Fa'agata le fa'aogaina o le fa'aogaina o le fa'aogaina
$enable-grid-classes: false
ma fa'aaga le CSS Grid e ala i le fa'atulagaina$enable-cssgrid: true
. Ona, toe faʻapipiʻi lau Sass. -
Sui tulaga o
.row
le.grid
. O le.grid
vasega e setidisplay: grid
ma fatuina segrid-template
mea 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 legrid-column
meatotino nai lo lewidth
. -
O koluma ma le tele o alavai e fa'atulaga e ala i fesuiaiga CSS. Seti nei mea i luga o le matua
.grid
ma fa'avasega i le mea e te mana'o ai, i totonu po'o totonu o se sitaili, fa'atasi--bs-columns
ma le--bs-gap
.
I le lumanaʻi, e foliga mai o le a suia Bootstrap i se fofo faʻapipiʻi ona gap
ua 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
gap
sui e le meatotino le fa'alavapadding
mai la tatou faiga fa'asologa fa'aletonu ma e sili atu ona galue e pei omargin
. -
O lea la, e le pei o
.row
le s,.grid
e 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 i vasega fa'aleleia (fa'ata'ita'iga,
style="--bs-columns: 3;"
vsclass="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-4
vasega. Fa'aopoopo vasega talileleia e sui ai le fa'atulagaina i le tele o le va'aiga.
<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>
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">
<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">
<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 gap
fa'atatau i va fa'alava ma vasa i le va o mea fa'avasega.
<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>
Amata
Amata vasega e fa'amoemoe e sui a matou vasega fa'aletonu o le grid, ae e le tutusa. 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-start
ma 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 1
tau 0
le aoga mo nei meatotino.
<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>
Koluma ta'avale
Afai e 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">
<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">
<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 .grid
s. 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
.grid
i 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 fa'ataga ai le lavelave ma fa'aaganu'u fa'atulagaina pe a fa'atusatusa i la tatou faiga fa'asologa fa'aletonu.
<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>
Fa'asinomaga
Fa'asinomaga le numera o koluma, le numera o laina, ma le lautele o va ma fesuiaiga CSS i le lotoifale.
Fesuia'i | Fallback taua | Fa'amatalaga |
---|---|---|
--bs-rows |
1 |
Le numera o laina i lau faʻataʻitaʻiga faʻasologa |
--bs-columns |
12 |
Le numera o koluma i lau fa'ata'ita'iga fa'asologa |
--bs-gap |
1.5rem |
Le tele o le va i le va o koluma (tutusa ma faalava) |
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-rows
ona e leʻi faʻatulagaina i soʻo se mea. A oʻo loa, o le .grid
a 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 .grid
mea fa'asologa, ina ia fa'avasegaina e aunoa ma le fa'aopoopoina manino o se .g-col
vasega.
<div class="grid" 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" 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>
Faaopoopo laina
Fa'aopoopo isi laina ma suia le tu'uga o koluma:
<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>
Vava
Suia le va sa'o i le na'o le suia o le row-gap
. Manatua matou te faʻaogaina gap
i luga ole .grid
s, ae row-gap
e column-gap
mafai ona faʻaleleia pe a manaʻomia.
<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>
Ona o lena mea, e mafai ona e maua ni gap
s 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-gap
fesuiaiga CSS.
<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
O le tasi tapula'a o le CSS Grid o a tatou vasega le aoga o lo'o fa'atupuina pea e lua Sass fesuiaiga, $grid-columns
ma $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" 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>