Grid CSS
Dysgwch sut i alluogi, defnyddio ac addasu ein system cynllun amgen sydd wedi'i hadeiladu ar Grid CSS gydag enghreifftiau a phytiau cod.
Mae system grid rhagosodedig Bootstrap yn benllanw dros ddegawd o dechnegau gosodiad CSS, sydd wedi cael eu profi gan filiynau o bobl. Ond, fe'i crëwyd hefyd heb lawer o'r nodweddion a'r technegau CSS modern rydyn ni'n eu gweld mewn porwyr fel y Grid CSS newydd.
Sut mae'n gweithio
Gyda Bootstrap 5, rydym wedi ychwanegu'r opsiwn i alluogi system grid ar wahân sydd wedi'i hadeiladu ar CSS Grid, ond gyda thro Bootstrap. Rydych chi'n dal i gael dosbarthiadau y gallwch chi eu gwneud ar fympwy i adeiladu cynlluniau ymatebol, ond gyda dull gwahanol o dan y cwfl.
-
Mae Grid CSS yn optio i mewn. Analluoga'r system grid rhagosodedig trwy osod
$enable-grid-classes: false
a galluogi'r Grid CSS trwy osod$enable-cssgrid: true
. Yna, ail-grynhoi eich Sass. -
Amnewid enghreifftiau o
.row
gyda.grid
. Mae'r.grid
dosbarth yn gosoddisplay: grid
ac yn creu fersiwngrid-template
rydych chi'n adeiladu arno gyda'ch HTML. -
Disodli
.col-*
dosbarthiadau gyda.g-col-*
dosbarthiadau. Mae hyn oherwydd bod ein colofnau Grid CSS yn defnyddio'rgrid-column
priodwedd yn llewidth
. -
Mae maint colofnau a gwteri yn cael eu gosod trwy newidynnau CSS. Gosodwch y rhain ar y rhiant
.grid
ac addaswch sut bynnag y dymunwch, yn unol neu mewn taflen arddull, gyda--bs-columns
a--bs-gap
.
Yn y dyfodol, mae'n debygol y bydd Bootstrap yn symud i ddatrysiad hybrid gan fod yr gap
eiddo wedi sicrhau cefnogaeth porwr bron yn llawn ar gyfer flexbox.
Gwahaniaethau allweddol
O'i gymharu â'r system grid rhagosodedig:
-
Nid yw cyfleustodau hyblyg yn effeithio ar golofnau Grid CSS yn yr un modd.
-
Mae bylchau yn cymryd lle cwteri. Mae'r
gap
eiddo yn disodli'r llorweddolpadding
o'n system grid rhagosodedig ac mae'n gweithredu'n debycachmargin
. -
Fel y cyfryw, yn wahanol i
.row
s,.grid
nid oes gan s unrhyw ymylon negyddol ac ni ellir defnyddio cyfleustodau ymyl i newid y cwteri grid. Mae bylchau grid yn cael eu cymhwyso'n llorweddol ac yn fertigol yn ddiofyn. Gweler yr adran addasu am ragor o fanylion. -
Dylid ystyried arddulliau mewnol ac arfer yn lle dosbarthiadau addaswyr (ee,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Mae nythu yn gweithio yn yr un modd, ond efallai y bydd angen i chi ailosod eich cyfrif colofnau ar bob achos o nyth
.grid
. Gweler yr adran nythu am fanylion.
Enghreifftiau
Tair colofn
Gellir creu tair colofn lled cyfartal ar draws yr holl fannau gwylio a dyfeisiau trwy ddefnyddio'r .g-col-4
dosbarthiadau. Ychwanegu dosbarthiadau ymatebol i newid y cynllun yn ôl maint y porth gwylio.
<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>
Ymatebol
Defnyddiwch ddosbarthiadau ymatebol i addasu eich cynllun ar draws pyrth gwylio. Yma rydym yn dechrau gyda dwy golofn ar y meysydd gwylio culaf, ac yna'n tyfu i dair colofn ar olygfannau canolig ac uwch.
<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>
Cymharwch hynny â'r cynllun dwy golofn hwn ym mhob man gwylio.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Lapio
Mae eitemau grid yn lapio'n awtomatig i'r llinell nesaf pan nad oes mwy o le yn llorweddol. Sylwch fod hyn yn gap
berthnasol i fylchau llorweddol a fertigol rhwng eitemau 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>
Yn dechrau
Nod dosbarthiadau cychwyn yw disodli dosbarthiadau gwrthbwyso ein grid rhagosodedig, ond nid ydynt yn hollol yr un peth. Mae CSS Grid yn creu templed grid trwy arddulliau sy'n dweud wrth borwyr i "ddechrau yn y golofn hon" a "gorffen yn y golofn hon." Yr eiddo hynny yw grid-column-start
a grid-column-end
. Llaw-fer yw dosbarthiadau cychwyn ar gyfer y cyntaf. Pârwch nhw gyda'r dosbarthiadau colofn i faint ac aliniwch eich colofnau sut bynnag y mae eu hangen arnoch chi. Mae dosbarthiadau cychwyn yn dechrau 1
fel 0
y mae gwerth annilys ar gyfer y priodweddau hyn.
<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>
Colofnau Auto
Pan nad oes dosbarthiadau ar yr eitemau grid (plant agosaf .grid
), bydd pob eitem grid yn awtomatig yn cael ei maint i un golofn.
<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>
Gellir cymysgu'r ymddygiad hwn â dosbarthiadau colofn 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>
Nythu
Yn debyg i'n system grid rhagosodedig, mae ein Grid CSS yn caniatáu ar gyfer nythu .grid
s. Fodd bynnag, yn wahanol i'r rhagosodiad, mae'r grid hwn yn etifeddu newidiadau yn y rhesi, y colofnau a'r bylchau. Ystyriwch yr enghraifft isod:
- Rydym yn diystyru'r nifer rhagosodedig o golofnau gyda newidyn CSS lleol:
--bs-columns: 3
. - Yn yr auto-golofn gyntaf, mae cyfrif y golofn yn cael ei etifeddu ac mae pob colofn yn draean o'r lled sydd ar gael.
- Yn yr ail auto-golofn, rydym wedi ailosod y cyfrif colofn ar y nyth
.grid
i 12 (ein rhagosodiad). - Nid oes gan y drydedd golofn auto unrhyw gynnwys nythu.
Yn ymarferol mae hyn yn caniatáu ar gyfer cynlluniau mwy cymhleth ac wedi'u teilwra o'u cymharu â'n system grid rhagosodedig.
<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>
Addasu
Addaswch nifer y colofnau, nifer y rhesi, a lled y bylchau gyda newidynnau CSS lleol.
Amrywiol | Gwerth wrth gefn | Disgrifiad |
---|---|---|
--bs-rows |
1 |
Nifer y rhesi yn eich templed grid |
--bs-columns |
12 |
Nifer y colofnau yn eich templed grid |
--bs-gap |
1.5rem |
Maint y bwlch rhwng colofnau (fertigol a llorweddol) |
Nid oes gan y newidynnau CSS hyn unrhyw werth rhagosodedig; yn lle hynny, maent yn cymhwyso gwerthoedd wrth gefn a ddefnyddir hyd nes y darperir enghraifft leol. Er enghraifft, rydym yn defnyddio var(--bs-rows, 1)
ar gyfer ein rhesi Grid CSS, sy'n anwybyddu --bs-rows
oherwydd nad yw hynny wedi'i osod yn unman eto. Unwaith y bydd, bydd yr .grid
enghraifft yn defnyddio'r gwerth hwnnw yn lle gwerth wrth gefn 1
.
Dim dosbarthiadau grid
Eitemau grid yw elfennau plant .grid
uniongyrchol, felly byddant yn cael eu maint heb ychwanegu .g-col
dosbarth yn benodol.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Colofnau a bylchau
Addaswch nifer y colofnau a'r bwlch.
<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>
Ychwanegu rhesi
Ychwanegu mwy o resi a newid lleoliad colofnau:
<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>
Bylchau
Newidiwch y bylchau fertigol dim ond trwy addasu'r row-gap
. Sylwch ein bod yn defnyddio gap
on .grid
s, ond row-gap
a column-gap
gellir eu haddasu yn ôl yr angen.
<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>
Oherwydd hynny, gallwch gael gap
s fertigol a llorweddol gwahanol, a all gymryd gwerth sengl (pob ochr) neu bâr o werthoedd (fertigol a llorweddol). Gellir cymhwyso hwn gydag arddull alinol ar gyfer gap
, neu gyda'n --bs-gap
newidyn 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
Un cyfyngiad ar y Grid CSS yw bod ein dosbarthiadau diofyn yn dal i gael eu cynhyrchu gan ddau newidyn Sass, $grid-columns
a $grid-gutter-width
. Mae hyn i bob pwrpas yn rhagbennu nifer y dosbarthiadau a gynhyrchir yn ein CSS a luniwyd. Mae gennych ddau opsiwn yma:
- Addaswch y newidynnau Sass rhagosodedig hynny ac ail-grynhoi eich CSS.
- Defnyddiwch arddulliau mewnol neu arferol i ychwanegu at y dosbarthiadau a ddarperir.
Er enghraifft, gallwch gynyddu'r cyfrif colofnau a newid maint y bwlch, ac yna maint eich “colofnau” gyda chymysgedd o arddulliau mewnol a dosbarthiadau colofn Grid CSS wedi'u diffinio ymlaen llaw (ee, .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>