Rrjeti CSS

Sistemi i paracaktuar i rrjetit të Bootstrap përfaqëson kulmin e më shumë se një dekade të teknikave të paraqitjes së CSS, të provuara dhe të testuara nga miliona njerëz. Por, ai u krijua gjithashtu pa shumë nga veçoritë dhe teknikat moderne të CSS që po shohim në shfletues si rrjeti i ri CSS.

Si punon

Me Bootstrap 5, ne kemi shtuar opsionin për të aktivizuar një sistem të veçantë të rrjetit që është ndërtuar në CSS Grid, por me një kthesë Bootstrap. Ju ende merrni klasa që mund t'i aplikoni sipas dëshirës për të ndërtuar paraqitje të përgjegjshme, por me një qasje të ndryshme nën kapuç.

• Rrjeti CSS është i zgjedhur. Çaktivizoni sistemin e paracaktuar të rrjetit duke vendosur $enable-grid-classes: falsedhe aktivizoni rrjetin CSS duke vendosur $enable-cssgrid: true. Pastaj, ripërpiloni Sass-in tuaj.

• Zëvendësoni shembujt e .rowme .grid. Klasa .gridvendos display: griddhe krijon një grid-templateqë ju e ndërtoni me HTML-në tuaj.

• Zëvendësoni .col-*klasat me .g-col-*klasa. Kjo ndodh sepse kolonat tona të rrjetit CSS përdorin veçorinë në grid-columnvend të width.

• Kolonat dhe madhësitë e ulluqeve vendosen nëpërmjet variablave CSS. Vendosni këto në prind .griddhe personalizoni si të dëshironi, në linjë ose në një fletë stili, me --bs-columnsdhe --bs-gap.

Në të ardhmen, Bootstrap ka të ngjarë të zhvendoset në një zgjidhje hibride pasi gapprona ka arritur mbështetje pothuajse të plotë të shfletuesit për flexbox.

Dallimet kryesore

Krahasuar me sistemin e paracaktuar të rrjetit:

• Shërbimet Flex nuk ndikojnë në kolonat CSS Grid në të njëjtën mënyrë.

• Boshllëqet zëvendësojnë ulluqet. Prona gapzëvendëson horizontalin paddingnga sistemi ynë i paracaktuar i rrjetit dhe funksionon më shumë si margin.

• Si të tilla, ndryshe nga .rows, .grids nuk kanë marzhe negative dhe shërbimet e marzhit nuk mund të përdoren për të ndryshuar ulluqet e rrjetit. Boshllëqet e rrjetit aplikohen horizontalisht dhe vertikalisht si parazgjedhje. Shikoni seksionin e personalizimit për më shumë detaje.

• Stilet inline dhe të personalizuara duhet të shihen si zëvendësues për klasat e modifikuesve (p.sh., style="--bs-columns: 3;"vs class="row-cols-3").

• Vendosja e foleve funksionon në mënyrë të ngjashme, por mund t'ju kërkojë të rivendosni numrin e kolonave në çdo shembull të një ndërlidhjeje .grid. Shikoni seksionin e foleve për detaje.

Shembuj

Tre kolona

Tre kolona me gjerësi të barabartë në të gjitha portat e shikimit dhe pajisjet mund të krijohen duke përdorur .g-col-4klasat. Shtoni klasa të përgjegjshme për të ndryshuar paraqitjen sipas madhësisë së portit të pamjes.

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

Të përgjegjshme

Përdorni klasa të përgjegjshme për të rregulluar paraqitjen tuaj nëpër portat e shikimit. Këtu fillojmë me dy kolona në portat më të ngushta të pamjes, dhe më pas rritemi në tre kolona në portat e pamjes mesatare dhe më lart.

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

Krahasoni atë me këtë paraqitje dy kolonash në të gjitha portat e shikimit.

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

Mbështjellja

Artikujt e rrjetës mbyllen automatikisht në rreshtin tjetër kur nuk ka më vend horizontalisht. Vini re se kjo gapvlen për boshllëqet horizontale dhe vertikale midis artikujve të rrjetit.

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

Fillon

Klasat e fillimit synojnë të zëvendësojnë klasat e kompensimit të rrjetit tonë të paracaktuar, por ato nuk janë plotësisht të njëjta. CSS Grid krijon një shabllon rrjeti përmes stileve që u thonë shfletuesve të "fillojnë në këtë kolonë" dhe "përfundojnë në këtë kolonë". Ato prona janë grid-column-startdhe grid-column-end. Klasat fillestare janë stenografi për të parën. Çiftojini ato me klasat e kolonave sipas madhësisë dhe rreshtoni kolonat tuaja sipas nevojës. Klasat e fillimit fillojnë me 1një 0vlerë të pavlefshme për këto veti.

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

Kolonat automatike

Kur nuk ka klasa në artikujt e rrjetit (fëmijët e menjëhershëm të një .grid), secili artikull i rrjetit do të përmasohet automatikisht në një kolonë.

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

Kjo sjellje mund të përzihet me klasat e kolonave të rrjetit.

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

Folezimi

Ngjashëm me sistemin tonë të paracaktuar të rrjetit, rrjeti ynë CSS mundëson folezim të lehtë të .grids. Megjithatë, ndryshe nga standardi, ky rrjet trashëgon ndryshime në rreshta, kolona dhe boshllëqe. Merrni parasysh shembullin e mëposhtëm:

• Ne anashkalojmë numrin e parazgjedhur të kolonave me një variabël CSS lokale: --bs-columns: 3.
• Në kolonën e parë automatike, numri i kolonave trashëgohet dhe secila kolonë është një e treta e gjerësisë së disponueshme.
• Në kolonën e dytë automatike, ne kemi rivendosur numrin e kolonave në të mbivendosur .gridnë 12 (parazgjedhja jonë).
• Kolona e tretë automatike nuk ka përmbajtje të ndërthurur.

Në praktikë kjo lejon paraqitje më komplekse dhe më të personalizuara kur krahasohet me sistemin tonë të paracaktuar të rrjetit.

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

Përshtatje

Personalizo numrin e kolonave, numrin e rreshtave dhe gjerësinë e boshllëqeve me variabla lokale CSS.

Këto variabla CSS nuk kanë vlerë të paracaktuar; në vend të kësaj, ata aplikojnë vlera kthimi që përdoren derisa të sigurohet një shembull lokal. Për shembull, ne përdorim var(--bs-rows, 1)për rreshtat tanë të rrjetit CSS, i cili injoron --bs-rowssepse nuk është vendosur ende askund. Pasi të jetë, .gridshembulli do ta përdorë atë vlerë në vend të vlerës së kthimit të 1.

Nuk ka klasa në rrjet

Elementet e fëmijëve të menjëhershëm të .gridjanë artikuj në rrjet, kështu që ato do të përmasohen pa shtuar në mënyrë të qartë një .g-colklasë.

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

Kolonat dhe boshllëqet

Rregulloni numrin e kolonave dhe hendekun.

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

Shtimi i rreshtave

Shtimi i më shumë rreshtave dhe ndryshimi i vendosjes së kolonave:

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

Boshllëqe

Ndryshoni boshllëqet vertikale vetëm duke modifikuar row-gap. Vini re se ne përdorim gapnë .grids, por row-gapdhe column-gapmund të modifikohet sipas nevojës.

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

Për shkak të kësaj, ju mund të keni s të ndryshme vertikale dhe horizontale gap, të cilat mund të marrin një vlerë të vetme (të gjitha anët) ose një palë vlerash (vertikale dhe horizontale). Kjo mund të zbatohet me një stil inline për gap, ose me --bs-gapndryshoren tonë CSS.

<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

One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, $grid-columns and $grid-gutter-width. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:

• Modify those default Sass variables and recompile your CSS.
• Use inline or custom styles to augment the provided classes.

For example, you can increase the column count and change the gap size, and then size your “columns” with a mix of inline styles and predefined CSS Grid column classes (e.g., .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>