Keriti ya CSS
Ithute ka moo o ka kgontšhago, o šomišago, le go tlwaetša tshepedišo ya rena ya peakanyo ye nngwe yeo e agilwego go CSS Grid ka mehlala le dikarolwana tša khoutu.
Tshepedišo ya keriti ya go se fetoge ya Bootstrap e emela sehlohlolong sa mengwaga ye e fetago ye lesome ya dithekniki tša peakanyo ya CSS, tšeo di lekilwego le go lekwa ke batho ba dimilione. Eupša, e ile ya hlolwa gape ntle le bontši bja dikarolo tša sebjalebjale tša CSS le dithekniki tšeo re di bonago ka go diphensele go swana le Gridi ye mpsha ya CSS.
Kamoo e šomago ka gona
Ka Bootstrap 5, re okeditše kgetho ya go kgontšha tshepedišo ya keriti ye e arogilego yeo e agilwego go CSS Grid, eupša ka go sotha ga Bootstrap. O sa hwetša diklase tšeo o ka di dirago dikgopelo ka go rata go aga dipeakanyo tše di arabelago, eupša ka mokgwa wo o fapanego ka fase ga hood.
-
CSS Grid ke go kgetha go tsena. Thibela tshepedišo ya keriti ya maitirelo ka go beakanya
$enable-grid-classes: false
le go kgontšha Keriti ya CSS ka go beakanya$enable-cssgrid: true
. Ke moka, kgoboketša gape Sass ya gago. -
Efa ditiragalo tša
.row
ka.grid
. Sehlopha.grid
se beakanyadisplay: grid
le go hlama agrid-template
yeo o agago go yona ka HTML ya gago. -
Efa
.col-*
diklase legato ka.g-col-*
diklase. Se ke ka lebaka la gore dikholomo tša rena tša CSS Grid di šomišagrid-column
thepa go e na lewidth
. -
Dikholomo le bogolo bja gutter di bewa ka diphetogo tša CSS. Beakanya tše go motswadi
.grid
gomme o tlwaetše go sa šetšwe seo o se nyakago, ka gare ga mothaladi goba ka gare ga letlakala la setaele, ka--bs-columns
le--bs-gap
.
Nakong e tlago, Bootstrap go na le kgonagalo ya gore e tla fetogela go tharollo ya motswako ka ge gap
thepa e fihleletše thekgo ye e nyakilego go ba ye e tletšego ya sephephediši sa flexbox.
Diphapano tše bohlokwa
Ge go bapetšwa le tshepedišo ya keriti ya go se fetoge:
-
Didirišwa tša Flex ga di ame dikholomo tša CSS Grid ka tsela ye e swanago.
-
Dikgoba di tšeela diphaephe sebaka. Thepa
gap
e tšea sebaka sa go rapalalapadding
go tšwa go tshepedišo ya rena ya keriti ya go se fetoge gomme e šoma go swana kudu lemargin
. -
Ka ge go le bjalo, go fapana le
.row
s,.grid
s ga e na mapheko a mabe gomme didirišwa tša ka thoko di ka se šomišwe go fetoša diphaephe tša keriti. Dikgoba tša keriti di dirišwa ka go rapalala le ka go otlologa ka go ikemela. Bona karolo ya go tlwaetša bakeng sa dintlha tše dingwe. -
Ditaele tša ka gare le tša tlwaelo di swanetše go lebelelwa bjalo ka dilo tšeo di tšeago legato la diklase tša sefetoši (mohlala,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Go tsenya dihlaga go šoma ka mo go swanago, eupša go ka nyaka gore o seta gape dipalo tša gago tša dikholomo go mohlala o mongwe le o mongwe wa go tsenya sehlaga
.grid
. Bona karolo ya go bea dihlaga bakeng sa dintlha.
Mehlala
Dikholomo tše tharo
Dikholomo tše tharo tša bophara bjo bo lekanago go ralala le mafelo ka moka a go lebelela le didirišwa di ka hlolwa ka go šomiša .g-col-4
diklase. Oketša diklase tše di arabelago go fetoša peakanyo ka bogolo bja lefelo la go lebelela.
<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>
Go arabela
Šomiša diklase tše di arabelago go beakanya peakanyo ya gago go ralala le dipono tša go lebelela. Mo re thoma ka dikholomo te pedi godimo ga dipono te di sesane kudu, gomme ka morago re gole go fihla go dikholomo te tharo go dipono ta magareng le godimo.
<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>
Bapetša seo le peakanyo ye ya dikholomo tše pedi go dipono ka moka.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Go phuthela
Diaetheme tša keriti di phuthela ka go iketla go ya mothalong wo o latelago ge go se na sebaka se sengwe ka go rapalala. Hlokomela gore e gap
šoma go dikgoba tše di rapaletšego le tše di emego magareng ga dilo tša keriti.
<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>
E thoma
Diklase tša go thoma di ikemišeditše go tšea legato la diklase tša offset tša keriti ya rena ya go se fetoge, eupša ga di swane ka botlalo. CSS Grid e hlama thempleite ya keriti ka mekgwa yeo e botšago diphensele go “thoma kholomong ye” le “go felela kholomong ye.” Dithoto tšeo ke grid-column-start
le grid-column-end
. Diklase tša go thoma ke shorthand bakeng sa ya pele. Di kopanye le diklase ta dikholomo go ya ka bogolo le go logaganya dikholomo ta gago le ge go le bjalo o di hloka. Diklase tša go thoma di thoma ka 1
bjalo ka ge 0
e le boleng bjo bo sa šomego bja dithoto tše.
<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>
Dikholomo tša go itiriša
Ge go se na diklase go diaetheme ta keriti (bana ba kgauswi ba a .grid
), aetheme ye nngwe le ye nngwe ya keriti e tla bewa bogolo ka go iketla go kholomo e tee.
<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>
Boitshwaro bjo bo ka hlakantšhwa le diklase tša kholomo ya keriti.
<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>
Go dira dihlaga
Go swana le tshepedišo ya rena ya keriti ya go se fetoge, Gridi ya rena ya CSS e dumelela go bea dihlaga gabonolo tša .grid
s. Le ge go le bjalo, go fapana le ya go se fetoge, keriti ye e tšea bohwa bja diphetogo ka go methalo, dikholomo, le diphapano. Ela hloko mohlala wo o lego ka mo tlase:
- Re tloša palo ya go se fetoge ya dikholomo ka phetogo ya CSS ya selegae:
--bs-columns: 3
. - Ka go kholomo ya mathomo ya go itiriša, palo ya dikholomo e a abelwa gomme kholomo ye nngwe le ye nngwe ke tee-tharong ya bophara bjo bo lego gona.
- Ka go kholomo ya bobedi ya go itiriša, re beakantše gape palo ya kholomo go yeo e tsentšwego
.grid
go 12 (ya rena ya go se fetoge). - Kholomo ya boraro ya go itiriša ga e na diteng tše di tsentšwego ka gare ga sehlaga.
Ka go diragatša se se dumelela dipeakanyo tše di raraganego kudu le tša tlwaelo ge di bapetšwa le tshepedišo ya rena ya keriti ya go se fetoge.
<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>
Go dira gore e be ya gago
Tlwaetša palo ya dikholomo, palo ya methaladi, le bophara bja diphapano ka diphetogo tša CSS tša selegae.
E feto-fetogago | Boleng bja go wa morago | Tlhalošo |
---|---|---|
--bs-rows |
1 |
Palo ya methaladi ka go thempleite ya gago ya keriti |
--bs-columns |
12 |
Palo ya dikholomo ka go thempleite ya gago ya keriti |
--bs-gap |
1.5rem |
Bogolo bja sekgoba magareng ga dikholomo (tše di emego thwii le tše di rapaletšego) . |
Diphetogo tše tša CSS ga di na boleng bja go se fetoge; go e na le moo, ba diriša dikelo tša go boela morago tšeo di šomišwago go fihlela go fiwa mohlala wa selegae. Go fa mohlala, re šomiša var(--bs-rows, 1)
go mela ya rena ya CSS Grid, yeo e hlokomologago --bs-rows
ka gobane seo ga se sa bewa felo go fihla ga bjale. Ge e šetše e le bjalo, .grid
mohlala o tla šomiša boleng bjoo go e na le boleng bja go wa morago bja 1
.
Ga go na diklase tša keriti
Hang-hang bana elements ya .grid
ke keriti dintho, kahoo ba tla ba sized ntle le ka ho toba eketsa .g-col
sehlopha.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Dikholomo le diphapano
Beakanya palo ya dikholomo le sekgoba.
<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>
Go oketša methaladi
Go oketša methaladi ye mengwe le go fetoša go bewa ga dikholomo:
<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>
Diphapano
Fetoša diphapano tše di emego thwii fela ka go fetoša row-gap
. Hlokomela gore re šomiša gap
go .grid
s, eupša row-gap
gomme column-gap
e ka fetošwa ge go nyakega.
<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>
Ka lebaka la seo, o ka ba le s e fapaneng paatsepama le rapameng gap
, e leng ka nka boleng bo le 'ngoe (mahlakoreng tsohle) kapa para ya boleng (e emeng le e rapameng). Se se ka dirišwa ka setaele sa ka gare ga mothaladi sa gap
, goba ka --bs-gap
phetogo ya rena ya 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
Moedi o tee wa Gridi ya CSS ke gore diklase tša rena tša go se fetoge di sa tšweletšwa ke diphetogo tše pedi tša Sass, $grid-columns
le $grid-gutter-width
. Se se laola e sa le pele ka mo go atlegilego palo ya diklase tšeo di tšweleditšwego ka go CSS ya rena yeo e kgobokeditšwego. O na le dikgetho tše pedi mo:
- Fetoša diphetogo tšeo tša Sass tša go se fetoge gomme o kgoboketše gape CSS ya gago.
- Šomiša ditaele tša ka gare ga mothaladi goba tša tlwaelo go oketša diklase tše di filwego.
Go fa mohlala, o ka oketša palo ya dikholomo gomme wa fetoša bogolo bja sekgoba, gomme wa lekanyetša “dikholomo” tša gago ka motswako wa mekgwa ya ka gare ga mothaladi le diklase tša dikholomo tša CSS Grid tše di hlalošitšwego e sa le pele (mohlala, .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>