Gridi ya CSS
Jifunze jinsi ya kuwezesha, kutumia, na kubinafsisha mfumo wetu mbadala wa mpangilio uliojengwa kwenye Gridi ya CSS kwa mifano na vijisehemu vya msimbo.
Mfumo wa gridi chaguo-msingi wa Bootstrap unawakilisha kilele cha zaidi ya muongo mmoja wa mbinu za mpangilio wa CSS, zilizojaribiwa na kujaribiwa na mamilioni ya watu. Lakini, pia iliundwa bila vipengele na mbinu nyingi za kisasa za CSS tunazoziona katika vivinjari kama vile Gridi mpya ya CSS.
Inavyofanya kazi
Kwa Bootstrap 5, tumeongeza chaguo kuwezesha mfumo tofauti wa gridi ya taifa ambao umejengwa kwenye Gridi ya CSS, lakini kwa msokoto wa Bootstrap. Bado unapata madarasa unaweza kuomba kwa hiari ili kuunda mipangilio inayoitikia, lakini kwa mbinu tofauti chini ya kofia.
-
Gridi ya CSS imejijumuisha. Zima mfumo wa gridi chaguo-msingi kwa kuweka
$enable-grid-classes: false
na kuwezesha Gridi ya CSS kwa kuweka$enable-cssgrid: true
. Kisha, kusanya Sass yako. -
Badilisha mifano
.row
na.grid
. Darasa.grid
huwekadisplay: grid
na kuundagrid-template
kile unachokiendeleza na HTML yako. -
Badilisha
.col-*
madarasa na.g-col-*
madarasa. Hii ni kwa sababu safu wima zetu za Gridi ya CSS hutumiagrid-column
mali badala yawidth
. -
Safu na saizi za gutter huwekwa kupitia vigeu vya CSS. Weka hizi kwa mzazi
.grid
na ubadilishe upendavyo, kulingana na laha ya mtindo, ukitumia--bs-columns
na--bs-gap
.
Katika siku zijazo, Bootstrap itabadilika hadi suluhisho la mseto kwani sifa gap
hii imepata usaidizi kamili wa kivinjari kwa flexbox.
Tofauti kuu
Ikilinganishwa na mfumo wa gridi chaguo-msingi:
-
Huduma za Flex haziathiri safu wima za Gridi ya CSS kwa njia ile ile.
-
Mapengo huchukua nafasi ya mifereji ya maji. Sifa hii
gap
inachukua nafasi ya mlalopadding
kutoka kwa mfumo wetu chaguomsingi wa gridi na hufanya kazi zaidi kamamargin
. -
Kwa hivyo, tofauti na
.row
s,.grid
s hazina pembezoni hasi na huduma za ukingo haziwezi kutumika kubadilisha mifereji ya gridi ya taifa. Mapengo ya gridi hutumiwa kwa usawa na wima kwa chaguo-msingi. Tazama sehemu ya kubinafsisha kwa maelezo zaidi. -
Mitindo ya ndani na maalum inapaswa kutazamwa kama mbadala wa madarasa ya kurekebisha (kwa mfano,
style="--bs-columns: 3;"
dhidi yaclass="row-cols-3"
). -
Nesting hufanya kazi vivyo hivyo, lakini inaweza kukuhitaji uweke upya hesabu za safu wima yako kwenye kila tukio la nested
.grid
. Tazama sehemu ya kuota kwa maelezo.
Mifano
Safu tatu
Safu wima tatu za upana sawa kwenye vituo vyote vya kutazama na vifaa vinaweza kuundwa kwa kutumia .g-col-4
madarasa. Ongeza madarasa ya kuitikia ili kubadilisha mpangilio kwa ukubwa wa kituo cha kutazama.
<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>
Msikivu
Tumia madarasa ya kuitikia kurekebisha mpangilio wako kwenye vituo vya kutazama. Hapa tunaanza na safu wima mbili kwenye lango finyu zaidi za kutazama, na kisha kukua hadi safu wima tatu kwenye tovuti za kutazama za wastani na hapo juu.
<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>
Linganisha hiyo na mpangilio huu wa safu wima mbili kwenye vituo vyote vya kutazama.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Kufunga
Vipengee vya gridi hujifunga kiotomatiki hadi kwenye mstari unaofuata wakati hakuna nafasi tena kwa mlalo. Kumbuka kwamba gap
inatumika kwa mapengo ya mlalo na wima kati ya vipengee vya gridi ya taifa.
<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>
Huanza
Madarasa ya kuanza yanalenga kuchukua nafasi ya madarasa yetu ya kurekebisha gridi chaguo-msingi, lakini hayako sawa kabisa. Gridi ya CSS huunda kiolezo cha gridi kupitia mitindo inayoambia vivinjari "kuanzia safu wima hii" na "malizie kwenye safu wima hii." Mali hizo ni grid-column-start
na grid-column-end
. Madarasa ya kuanza ni fupi kwa ya awali. Zioanishe na madarasa ya safuwima kwa ukubwa na utengeneze safu wima zako hata hivyo unahitaji. Anza madarasa huanza 1
kama 0
thamani batili ya sifa hizi.
<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>
Safu wima otomatiki
Wakati hakuna darasa kwenye vipengee vya gridi ya taifa (watoto wa karibu wa a .grid
), kila kipengee cha gridi kitawekwa ukubwa kwa safu moja kiotomatiki.
<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>
Tabia hii inaweza kuchanganywa na madarasa ya safu ya gridi ya taifa.
<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
Sawa na mfumo wetu wa gridi ya taifa, Gridi yetu ya CSS inaruhusu kwa urahisi kuota kwa .grid
s. Walakini, tofauti na chaguo-msingi, gridi hii hurithi mabadiliko katika safu, safu, na mapungufu. Fikiria mfano hapa chini:
- Tunabatilisha nambari chaguo-msingi ya safu wima kwa kigezo cha ndani cha CSS:
--bs-columns: 3
. - Katika safu wima otomatiki ya kwanza, hesabu ya safu wima hurithiwa na kila safu ni theluthi moja ya upana unaopatikana.
- Katika safu wima otomatiki ya pili, tumeweka upya hesabu ya safu wima kwenye kiota
.grid
hadi 12 (chaguo-msingi yetu). - Safu wima otomatiki ya tatu haina maudhui yaliyowekwa.
Kwa vitendo, hii inaruhusu mipangilio ngumu zaidi na maalum ikilinganishwa na mfumo wetu wa gridi ya taifa.
<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>
Kubinafsisha
Geuza kukufaa idadi ya safu wima, idadi ya safu mlalo, na upana wa mapengo kwa viambatisho vya ndani vya CSS.
Inaweza kubadilika | Thamani ya kurudi nyuma | Maelezo |
---|---|---|
--bs-rows |
1 |
Idadi ya safu mlalo katika kiolezo cha gridi yako |
--bs-columns |
12 |
Idadi ya safu wima katika kiolezo cha gridi yako |
--bs-gap |
1.5rem |
Saizi ya pengo kati ya safu wima (wima na mlalo) |
Vigezo hivi vya CSS havina thamani chaguo-msingi; badala yake, hutumia maadili mbadala ambayo hutumika hadi mfano wa ndani utolewe. Kwa mfano, sisi hutumia var(--bs-rows, 1)
kwa safu mlalo za Gridi ya CSS, ambayo hupuuza --bs-rows
kwa sababu hiyo haijawekwa popote bado. Ikishakuwa hivyo, .grid
mfano utatumia thamani hiyo badala ya thamani mbadala ya 1
.
Hakuna madarasa ya gridi ya taifa
Vipengele vya watoto mara moja .grid
ni vipengee vya gridi, kwa hivyo vitapewa ukubwa bila kuongeza .g-col
darasa moja kwa moja.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Nguzo na mapungufu
Rekebisha idadi ya safu wima na pengo.
<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>
Kuongeza safu
Kuongeza safu mlalo zaidi na kubadilisha uwekaji wa safu wima:
<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>
Mapungufu
Badilisha mapengo ya wima tu kwa kurekebisha row-gap
. Kumbuka kuwa tunatumia gap
kwenye .grid
s, lakini row-gap
na column-gap
inaweza kurekebishwa inavyohitajika.
<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>
Kwa sababu hiyo, unaweza kuwa na gap
s tofauti za wima na za usawa, ambazo zinaweza kuchukua thamani moja (pande zote) au jozi ya maadili (wima na ya usawa). Hii inaweza kutumika kwa mtindo wa ndani wa gap
, au kwa utofauti wetu wa --bs-gap
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
Kizuizi kimoja cha Gridi ya CSS ni kwamba madarasa yetu chaguo-msingi bado yanatolewa na anuwai mbili za Sass, $grid-columns
na $grid-gutter-width
. Hii huamua mapema idadi ya madarasa yanayotolewa katika CSS yetu iliyokusanywa. Una chaguzi mbili hapa:
- Rekebisha vigeu hivyo chaguo-msingi vya Sass na ujaze tena CSS yako.
- Tumia mitindo ya ndani au maalum ili kuongeza madarasa yaliyotolewa.
Kwa mfano, unaweza kuongeza hesabu ya safu wima na kubadilisha ukubwa wa pengo, na kisha ukubwa wa "safu" zako kwa mchanganyiko wa mitindo ya ndani na madarasa yaliyofafanuliwa awali ya safu wima ya CSS (kwa mfano, .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>