CSS Grid no ho nsɛm
Sua sɛnea wobɛma yɛn nhyehyɛe foforo no nhyehyɛe a wɔasi wɔ CSS Grid so no ayɛ adwuma, de adi dwuma, na woayɛ no sɛnea wopɛ a nhwɛso ne koodu asinasin wom.
Bootstrap default grid nhyehyɛe no gyina hɔ ma bɛboro mfe du a wɔde CSS nhyehyɛe ho akwan horow, a nnipa ɔpepem pii asɔ ahwɛ na wɔasɔ ahwɛ no awiei. Nanso, wɔsan nso yɛɛ no a ɛnni nnɛyi CSS nneɛma ne akwan pii a yɛrehu wɔ browser ahorow te sɛ CSS Grid foforo no mu.
Sɛnea ɛyɛ adwuma
Bootstrap 5 no, yɛde ɔkwan a ɛbɛma grid nhyehyɛe a ɛyɛ soronko a wɔasisi wɔ CSS Grid so no ayɛ adwuma, nanso ɛwɔ Bootstrap twist aka ho. Woda so ara nya adesua ahorow a wubetumi de adi dwuma wɔ whim mu de akyekye nhyehyɛe ahorow a ɛyɛ mmuae, nanso ɔkwan soronko bi wɔ hood no ase.
-
CSS Grid yɛ nea wobɛpaw sɛ wobɛkɔ mu. Ma default grid nhyehyɛe no nyɛ adwuma denam nhyehyɛe so
$enable-grid-classes: false
na ma CSS Grid no nyɛ adwuma denam nhyehyɛe so$enable-cssgrid: true
. Afei, san boaboa wo Sass no ano. -
Fa nhwɛso ahorow a ɛfa
.row
ne ho no si ananmu.grid
..grid
Klas no hyehyɛ nadisplay: grid
ɛyɛgrid-template
a wode wo HTML no si so. -
Fa
.col-*
adesua ahorow si adesua ahorow ananmu.g-col-*
. Eyi te saa efisɛ yɛn CSS Grid columns no degrid-column
agyapade no di dwuma sen sɛ wɔdewidth
. -
Wɔde CSS nsakrae ahorow so na wɔde adum ne gutter akɛse si hɔ. Fa eyinom si ɔwofo no so
.grid
na yɛ sɛnea wopɛ biara, inline anaa wɔ stylesheet mu, ne--bs-columns
ne--bs-gap
.
Daakye, ɛda adi sɛ Bootstrap bɛdan akɔ hybrid ano aduru so efisɛ gap
ɛkame ayɛ sɛ agyapade no anya browser mmoa a edi mũ ama flexbox.
Nsonsonoe atitiriw a ɛwɔ mu
Sɛ wode toto grid nhyehyɛe a wɔahyɛ da ayɛ no ho a:
-
Flex utilities no nnya CSS Grid columns no so nkɛntɛnso wɔ ɔkwan koro no ara so.
-
Gaps si nsu a ɛkɔ nsu mu no ananmu. Agyapade
gap
no sesa horizontal nopadding
fi yɛn default grid nhyehyɛe no mu na ɛyɛ adwuma kɛse te sɛmargin
. -
Sɛnea ɛte no, ɛnte sɛ
.row
s no,.grid
s nni margins a enye na margin utilities no ntumi mfa nsakra grid gutters no. Wɔde grid gaps no di dwuma wɔ ɔkwan a ɛkɔ soro ne nea ɛkɔ soro so default so. Hwɛ ɔfã a ɛfa customizing ho no na woanya ho nsɛm pii. -
Ɛsɛ sɛ wobu inline ne custom styles sɛ nea wɔde besi modifier classes ananmu (sɛ nhwɛso no,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Nesting yɛ adwuma saa ara, nanso ebia ɛbɛhwehwɛ sɛ wosan de wo kɔla akontaabu no si hɔ wɔ nested nhwɛso biara so
.grid
. Hwɛ nesting ɔfã no ma nsɛm no mu nsɛm.
Nhwɛso ahorow
Nnua abiɛsa
Wobetumi ayɛ nkorabata abiɛsa a ne tɛtrɛtɛ yɛ pɛ wɔ viewports ne mfiri nyinaa so denam .g-col-4
adesua ahorow no a wɔde bedi dwuma no so. Fa adesua ahorow a ɛyɛ mmuae ka ho na sesa nhyehyɛe no denam viewport kɛse so.
<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>
Mmuae a wɔde ma
Fa adesua ahorow a ɛyɛ mmuae di dwuma fa sesa wo nhyehyɛe no wɔ viewports nyinaa so. Ɛha na yɛde nkyerɛwde abien na efi ase wɔ viewports a ɛyɛ teateaa sen biara no so, na afei yenyin kɔ columns abiɛsa wɔ medium viewports ne nea ɛboro saa so.
<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 ɛno toto saa kɔla abien nhyehyɛe yi ho wɔ viewports nyinaa so.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Nneɛma a wɔde kyekyere nneɛma ho
Grid nneɛma no ankasa kyekyere kɔ line a edi hɔ no so bere a baabi nni hɔ bio wɔ ɔkwan a ɛkɔ soro no so. Hyɛ no nsow sɛ gap
ɛfa nsonsonoe a ɛda grid nneɛma ntam a ɛda fam ne nea ɛda fam ho.
<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>
Efi ase
Start classes botae ne sɛ ɛbɛsesa yɛn default grid no offset classes no, nanso ɛnyɛ ade koro koraa. CSS Grid yɛ grid template denam styles a ɛka kyerɛ browser ahorow sɛ “mfi ase wɔ saa column yi so” ne “awie wɔ column yi so.” Saa agyapade ahorow no grid-column-start
ne ne grid-column-end
. Start classes yɛ shorthand ma kan no. Fa wɔn ne column classes no bom ma ɛne wo columns no kɛse na ɛnyɛ pɛpɛɛpɛ sɛnea wuhia. Start classes fi ase wɔ 1
sɛnea 0
ɛyɛ botae a enni mu ma saa agyapade ahorow yi.
<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>
Auto nkyerɛwde ahorow
Sɛ adesua biara nni grid nneɛma no so (mma a wɔyɛ a .grid
) no mma ntɛm ara a, grid adeɛ biara bɛyɛ ne kɛseɛ ayɛ no kɔla baako.
<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>
Wobetumi de saa suban yi afrafra grid column class ahorow mu.
<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>
Nesting a wɔde yɛ buw
Te sɛ yɛn default grid nhyehyɛe no, yɛn CSS Grid no ma kwan ma ɛyɛ mmerɛw sɛ wobɛma .grid
s ayɛ nesting. Nanso, ɛnte sɛ default no, saa grid yi nya nsakrae wɔ rows, columns, ne gaps no mu. Susuw nhwɛso a ɛwɔ ase ha yi ho hwɛ:
- Yɛde local CSS variable bi to column dodow a wɔahyɛ da ayɛ no so:
--bs-columns: 3
. - Wɔ auto-column a edi kan no mu no, wonya kɔla dodow no agyapade na kɔla biara yɛ ntrɛwmu a ɛwɔ hɔ no nkyem abiɛsa mu biako.
- Wɔ auto-column a ɛtɔ so mmienu no mu no, yɛasan ahyɛ column count wɔ nested
.grid
no so akɔ 12 (yɛn default). - Auto-column a ɛtɔ so mmiɛnsa no nni nested content biara.
Wɔ nneyɛe mu no eyi ma kwan ma wɔyɛ nhyehyɛe ahorow a ɛyɛ den na ɛyɛ amanne bere a wɔde toto yɛn default grid nhyehyɛe no ho no.
<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>
Nneɛma a Wɔyɛ no Sɛnea Wɔpɛ
Fa local CSS variables sesa column dodow, row dodow, ne gaps no tɛtrɛtɛ.
Nneɛma a ɛsakra | Fallback bo a ɛsom | Nkyerɛmu |
---|---|---|
--bs-rows |
1 |
Ntrɛwmu dodow a ɛwɔ wo grid template no mu |
--bs-columns |
12 |
Nkorabata dodow a ɛwɔ wo grid template no mu |
--bs-gap |
1.5rem |
Ɔkwan a ɛda adum ntam no kɛse (a ɛda hɔ ne nea ɛda fam) . |
Saa CSS nsakraeɛ yi nni default value biara; mmom no, wɔde fallback values a wɔde di dwuma kosi sɛ wɔde local instance bɛma. Sɛ nhwɛsoɔ no, yɛde di dwuma var(--bs-rows, 1)
ma yɛn CSS Grid rows, a ɛbu ani gu so --bs-rows
ɛfiri sɛ wɔanhyehyɛ ɛno wɔ baabiara de besi nnɛ. Sɛ ɛba wie a, .grid
nhwɛso no de saa botae no bedi dwuma sen sɛ ɛde fallback bo a ɛwɔ 1
.
Grid adesua biara nni hɔ
Immediate children elements of .grid
yɛ grid nneɛma, enti wɔbɛyɛ sized a wɔmfa .g-col
adesuakuw bi nka ho pefee.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Ntrɛwmu ne ntamgyinafo
Yɛ nsakrae wɔ nkyerɛwde dodow ne ɔkwan a ɛda ntam no mu.
<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>
Nkyekyɛm ahorow a wɔde bɛka ho
Sɛ wode row pii bɛka ho na woasesa sɛnea wɔde column ahorow no besi hɔ:
<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>
Ntrɛwmu a ɛwɔ mu
Sesa nsonsonoe a ɛda hɔ no denam nsakrae a wobɛsakra no nkutoo so row-gap
. Hyɛ no nsow sɛ yɛde di dwuma gap
wɔ .grid
s so, nanso row-gap
na column-gap
wobetumi asesa sɛnea ɛho hia.
<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>
Esiane ɛno nti, wobɛtumi anya s a ɛsono vertical ne horizontal gap
, a ɛbɛtumi afa botaeɛ baako (afã nyinaa) anaa botaeɛ mmienu (vertical ne horizontal). Yei betumi de inline style adi dwuma ama gap
, anaa yɛn --bs-gap
CSS variable.
<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
Anohyeto biako a ɛwɔ CSS Grid no mu ne sɛ yɛn default class ahorow no da so ara yɛ Sass variables abien, $grid-columns
ne $grid-gutter-width
. Eyi di kan kyerɛ adesua dodow a wɔayɛ wɔ yɛn CSS a wɔaboaboa ano no mu yiye. Wowɔ nneɛma abien a wubetumi apaw wɔ ha:
- Sesa saa default Sass variables no na san boaboa wo CSS no ano.
- Fa inline anaa custom styles di dwuma de hyɛ adesua ahorow a wɔde ama no mu den.
Sɛ nhwɛsoɔ no, wobɛtumi ama kɔla dodoɔ no akɔ soro na woasesa gap kɛseɛ, na afei wode inline styles ne CSS Grid column class a wɔadi kan akyerɛkyerɛ mu (sɛ nhwɛsoɔ, .g-col-4
) afrafra wo “columns” no kɛseɛ.
<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>