Gulu la CSS

Dongosolo losakhazikika la Bootstrap likuyimira kutha kwazaka khumi zaukadaulo wa CSS, zoyesedwa ndikuyesedwa ndi mamiliyoni a anthu. Koma, idapangidwanso popanda zambiri zamakono za CSS ndi njira zomwe tikuwona mu asakatuli ngati CSS Grid yatsopano.

Momwe zimagwirira ntchito

Ndi Bootstrap 5, tawonjezera mwayi wopangitsa kuti pakhale gridi yosiyana yomwe imamangidwa pa CSS Grid, koma ndi Bootstrap twist. Mumapezabe makalasi omwe mungagwiritse ntchito mwachidwi kuti mupange masanjidwe omvera, koma ndi njira ina pansi pa hood.

• CSS Grid ndiyolowera. Zimitsani dongosolo la gridi yokhazikika pokhazikitsa $enable-grid-classes: falsendikuthandizira CSS Grid pokhazikitsa $enable-cssgrid: true. Kenako, phatikizaninso Sass yanu.

• Sinthani zochitika .rowza .grid. Kalasi .gridimakhazikitsa display: gridndikupanga grid-templatezomwe mumamanga ndi HTML yanu.

• Sinthani .col-*makalasi ndi .g-col-*makalasi. Izi ndichifukwa choti magawo athu a CSS Grid amagwiritsa ntchito grid-columnmalowo m'malo mwa width.

• Mizere ndi kukula kwa ngalande zimayikidwa kudzera mumitundu ya CSS. Khazikitsani izi pa kholo .gridndikusintha momwe mungafune, mumzere kapena papepala, ndi --bs-columnsndi --bs-gap.

M'tsogolomu, Bootstrap isintha kukhala njira yosakanizidwa popeza gapmalowa apeza chithandizo chamsakatuli cha flexbox.

Kusiyana kwakukulu

Poyerekeza ndi gridi yokhazikika:

• Zothandizira za Flex sizikhudza mizati ya CSS Grid chimodzimodzi.

• Mipata imalowa m'malo mwa ngalande. Katunduyo gapamalowa m'malo opingasa paddingkuchokera ku gridi yathu yosasinthika ndipo amagwira ntchito ngati margin.

• Mwakutero, mosiyana ndi .rows, .grids alibe malire oyipa ndipo zida zam'mphepete sizingagwiritsidwe ntchito kusintha ma gutters a grid. Mipata ya ma gridi imagwiritsidwa ntchito mopingasa komanso molunjika mwachisawawa. Onani gawo lokonzekera makonda kuti mumve zambiri.

• Masitayelo am'mizere ndi makonda akuyenera kuwonedwa ngati olowa m'malo mwa makalasi osintha (mwachitsanzo, style="--bs-columns: 3;"vs class="row-cols-3").

• Nesting imagwiranso ntchito mofananamo, koma ingafune kuti mukhazikitsenso ziwerengero zanu pagawo lililonse la nested .grid. Onani gawo la zisa kuti mudziwe zambiri.

Zitsanzo

Mizati itatu

Mizati itatu yokulirapo yofanana pamawonekedwe onse ndi zida zitha kupangidwa pogwiritsa ntchito .g-col-4makalasi. Onjezani makalasi omvera kuti musinthe masanjidwewo ndi kukula kwa malo owonera.

<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>

Womvera

Gwiritsani ntchito makalasi omvera kuti musinthe masanjidwe anu pamagawo owonera. Apa tikuyamba ndi mizati iwiri pamawonekedwe opapatiza kwambiri, kenako timakula mpaka magawo atatu pamawonekedwe apakatikati ndi pamwambapa.

<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>

Fananizani izi ndi magawo awiri awa pamawonekedwe onse.

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Kukulunga

Zinthu za gridi zimangodzikulunga pamzere wotsatira ngati palibe malo mopingasa. Dziwani kuti izi gapzikugwira ntchito pamipata yopingasa komanso yoyima pakati pa zinthu za 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>

Kuyambira

Makalasi oyambira amafuna kusintha makalasi athu osasinthika a gridi, koma sali ofanana. CSS Grid imapanga template ya grid kudzera masitayelo omwe amauza asakatuli kuti "ayambire pagawoli" ndi "kuthera pagawoli." Zinthu zimenezo grid-column-startndi grid-column-end. Maphunziro oyambira ndi achidule kwa akale. Aphatikizeni ndi makalasi amzambiri kuti akhale kukula kwake ndikuyanjanitsa mizati yanu momwe mungafunire. Makalasi oyambira amayamba 1ngati 0mtengo wosavomerezeka wazinthu izi.

<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>

Zopanga zokha

Ngati palibe makalasi pa zinthu za gridi (ana apafupi a .grid), chinthu chilichonse cha gridi chimangosinthidwa kukhala gawo limodzi.

<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>

Khalidwe ili likhoza kusakanikirana ndi makalasi amtundu wa 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>

Nesting

Mofanana ndi kachitidwe kathu ka gridi, CSS Grid yathu imalola kuti zisa zikhale zosavuta za .grids. Komabe, mosiyana ndi zosasinthika, gridi iyi imatenga kusintha kwa mizere, mizere, ndi mipata. Taganizirani chitsanzo chili pansipa:

• Timaposa chiwerengero chosasinthika cha mizati ndi kusintha kwa CSS komweko: --bs-columns: 3.
• Mugawo loyamba lodziyimira pawokha, chiwerengero cha magawo amatengera cholowa ndipo gawo lililonse ndi gawo limodzi mwamagawo atatu a m'lifupi mwake.
• Mugawo lachiwiri lodziyimira pawokha, takhazikitsanso kuchuluka kwa magawo omwe adasungidwa .gridmpaka 12 (zosasintha zathu).
• Gawo lachitatu lodziyimira pawokha ilibe zosungidwa.

Pochita izi zimalola kuti pakhale masanjidwe ovuta komanso okhazikika poyerekeza ndi dongosolo lathu la grid.

<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>

Kusintha mwamakonda

Sinthani makonda amizere, kuchuluka kwa mizere, ndi m'lifupi mwa mipatayo ndi zosintha zapa CSS.

Zosintha za CSSzi zilibe mtengo wokhazikika; m'malo mwake, amagwiritsa ntchito ziwerengero zobwereranso zomwe zimagwiritsidwa ntchito mpaka zochitika zapafupi zitaperekedwa. Mwachitsanzo, timagwiritsa ntchito var(--bs-rows, 1)mizere yathu ya CSS Grid, yomwe imanyalanyaza --bs-rowschifukwa sichinayike paliponse. Zikatero, .gridchitsanzocho chidzagwiritsa ntchito mtengowo m'malo mwa mtengo wobwereranso wa 1.

Palibe makalasi a gridi

Zinthu zapanthawi yomweyo za ana ndi zinthu za .gridgridi, kotero azikula popanda kuwonjezera .g-colkalasi.

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Mizati ndi mipata

Sinthani chiwerengero cha mizati ndi kusiyana.

<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>

Kuwonjezera mizere

Kuonjezera mizere ina ndikusintha kaimidwe ka mizati:

<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>

Mipata

Sinthani mipata yoyima pokha posintha mawonekedwe a row-gap. Dziwani kuti timagwiritsa ntchito gappa .grids, koma row-gapndipo column-gapzitha kusinthidwa ngati pakufunika.

<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>

Chifukwa chake, mutha kukhala ndi ma gaps oyimirira ndi opingasa, omwe amatha kutenga mtengo umodzi (mbali zonse) kapena mitengo iwiri (yoyima ndi yopingasa). Izi zitha kugwiritsidwa ntchito ndi masitayilo apaintaneti a gap, kapena ndikusintha kwathu kwa --bs-gapCSS.

<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

Cholepheretsa chimodzi cha CSS Grid ndikuti makalasi athu osakhazikika amapangidwabe ndi mitundu iwiri ya Sass, $grid-columnsndi $grid-gutter-width. Izi zimadziwiratu kuchuluka kwa makalasi opangidwa mu CSS yathu yopangidwa. Muli ndi njira ziwiri apa:

• Sinthani zosintha zosasinthika za Sass ndikubwezeretsanso CSS yanu.
• Gwiritsani ntchito masitayelo amzere kapena makonda kuti muwonjezere makalasi omwe aperekedwa.

Mwachitsanzo, mutha kuwonjezera kuchuluka kwa magawo ndikusintha kukula kwa kusiyana, ndiyeno kukula "magawo" anu ndi kusakaniza masitayelo amkati ndi makalasi a CSS Grid (mwachitsanzo, .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>