Gridi ya CSS

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 kujenga mipangilio inayoitikia, lakini kwa mbinu tofauti chini ya kofia.

• Gridi ya CSS imejijumuisha. Zima mfumo wa gridi chaguo-msingi kwa kuweka $enable-grid-classes: falsena kuwezesha Gridi ya CSS kwa kuweka $enable-cssgrid: true. Kisha, kusanya Sass yako.

• Badilisha mifano .rowna .grid. Darasa .gridhuweka display: gridna kuunda grid-templatekile unachokiendeleza na HTML yako.

• Badilisha .col-*madarasa na .g-col-*madarasa. Hii ni kwa sababu safu wima zetu za Gridi ya CSS hutumia grid-columnmali badala ya width.

• Safu na saizi za gutter huwekwa kupitia vigeu vya CSS. Weka hizi kwa mzazi .gridna ubadilishe upendavyo, kulingana na laha ya mtindo, ukitumia --bs-columnsna --bs-gap.

Katika siku zijazo, Bootstrap itabadilika hadi suluhisho la mseto kwani sifa gaphii 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 gapinachukua nafasi ya mlalo paddingkutoka kwa mfumo wetu chaguomsingi wa gridi na hufanya kazi zaidi kama margin.

• Kwa hivyo, tofauti na .rows, .grids 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 ya class="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-4madarasa. Ongeza madarasa ya kuitikia ili kubadilisha mpangilio kwa ukubwa wa kituo cha kutazama.

<div class="grid text-center">
  <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 text-center">
  <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 text-center">
  <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 ya mlalo. Kumbuka kwamba gapinatumika kwa mapengo ya mlalo na wima kati ya vipengee vya gridi ya taifa.

<div class="grid text-center">
  <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-startna grid-column-end. Madarasa ya kuanza ni fupi kwa ya awali. Zioanishe na madarasa ya safuwima kwa saizi na panga safu wima zako hata hivyo unahitaji. Anza madarasa huanza 1kama 0thamani batili ya sifa hizi.

<div class="grid text-center">
  <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 text-center">
  <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 text-center">
  <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 .grids. 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 .gridhadi 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 text-center" 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.

Vigezo hivi vya CSS havina thamani chaguo-msingi; badala yake, hutumia maadili mbadala ambayo hutumika hadi mfano wa ndani utolewe. Kwa mfano, tunatumia var(--bs-rows, 1)kwa safu mlalo za Gridi ya CSS, ambayo hupuuza --bs-rowskwa sababu hiyo haijawekwa popote bado. Ikishakuwa hivyo, .gridmfano utatumia thamani hiyo badala ya thamani mbadala ya 1.

Hakuna madarasa ya gridi ya taifa

Vipengele vya watoto mara moja .gridni vipengee vya gridi, kwa hivyo vitapewa ukubwa bila kuongeza .g-coldarasa moja kwa moja.

<div class="grid text-center" 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 text-center" 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 text-center" 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 text-center" 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 gapkwenye .grids, lakini row-gapna column-gapinaweza kurekebishwa inavyohitajika.

<div class="grid text-center" 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 gaps 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-gapCSS.

<div class="grid text-center" 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-columnsna $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 text-center" 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>