Grilă CSS

Sistemul de grilă implicit al Bootstrap reprezintă punctul culminant a peste un deceniu de tehnici de layout CSS, încercate și testate de milioane de oameni. Dar, a fost creat și fără multe dintre caracteristicile și tehnicile CSS moderne pe care le vedem în browsere, cum ar fi noua Grilă CSS.

Cum functioneaza

Cu Bootstrap 5, am adăugat opțiunea de a activa un sistem de grilă separat, care este construit pe CSS Grid, dar cu o răsucire Bootstrap. Încă primești cursuri pe care le poți aplica la un capriciu pentru a construi machete receptive, dar cu o abordare diferită sub capotă.

• Grila CSS este opt-in. Dezactivați sistemul de grilă implicit setând $enable-grid-classes: falseși activați Grila CSS setând $enable-cssgrid: true. Apoi, recompilați-vă Sass.

• Înlocuiți instanțele .rowcu .grid. Clasa .gridsetează display: gridși creează un pe grid-templatecare îl construiți cu HTML.

• Înlocuiți .col-*clasele cu .g-col-*clase. Acest lucru se datorează faptului că coloanele noastre CSS Grid folosesc grid-columnproprietatea în loc de width.

• Dimensiunile coloanelor și ale jgheaburilor sunt setate prin variabile CSS. Setați-le pe părinte .gridși personalizați cum doriți, în linie sau într-o foaie de stil, cu --bs-columnsși --bs-gap.

În viitor, Bootstrap va trece probabil la o soluție hibridă, deoarece gapproprietatea a atins compatibilitate aproape completă pentru browser pentru flexbox.

Diferențele cheie

Comparativ cu sistemul de grilă implicit:

• Utilitarele Flex nu afectează coloanele CSS Grid în același mod.

• Golurile înlocuiesc jgheaburi. Proprietatea gapînlocuiește orizontalul paddingdin sistemul nostru de grilă implicit și funcționează mai mult ca margin.

• Ca atare, spre deosebire .rowde s, .grids nu au marje negative, iar utilitățile de marjă nu pot fi folosite pentru a schimba jgheaburile rețelei. Decalajele de grilă sunt aplicate implicit orizontal și vertical. Consultați secțiunea de personalizare pentru mai multe detalii.

• Stilurile inline și personalizate ar trebui privite ca înlocuitori pentru clasele modificatoare (de exemplu, style="--bs-columns: 3;"vs class="row-cols-3").

• Imbricarea funcționează în mod similar, dar poate fi necesar să resetați contorizarea coloanelor pentru fiecare instanță a unui fișier .grid. Consultați secțiunea de imbricare pentru detalii.

Exemple

Trei coloane

.g-col-4Prin utilizarea claselor pot fi create trei coloane cu lățime egală în toate ferestrele și dispozitivele . Adăugați clase responsive pentru a modifica aspectul după dimensiunea ferestrei de vizualizare.

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

Receptiv

Folosiți clase de răspuns pentru a vă ajusta aspectul în ferestrele de vizualizare. Aici începem cu două coloane pe cele mai înguste ferestre de vizualizare, apoi creștem la trei coloane pe ferestrele medii și mai sus.

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

Comparați asta cu acest aspect cu două coloane la toate ferestrele de vizualizare.

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

Ambalaj

Elementele grilă se înfășoară automat la următoarea linie atunci când nu mai este spațiu pe orizontală. Rețineți că gapse aplică spațiilor orizontale și verticale dintre elementele grilei.

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

Începe

Clasele de pornire urmăresc să înlocuiască clasele de compensare ale grilei noastre implicite, dar nu sunt în totalitate la fel. Grila CSS creează un șablon de grilă prin stiluri care le spun browserelor să „înceapă de la această coloană” și „se încheie la această coloană”. Aceste proprietăți sunt grid-column-startși grid-column-end. Orele de început sunt prescurtare pentru primele. Asociați-le cu clasele de coloane pentru a dimensiona și alinia coloanele după cum aveți nevoie. Clasele de început încep la 1, deoarece 0este o valoare nevalidă pentru aceste proprietăți.

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

Coloane automate

Când nu există clase în elementele grilei (fii imediati ai unui .grid), fiecare element al grilei va fi dimensionat automat la o coloană.

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

Acest comportament poate fi amestecat cu clasele de coloane grilă.

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

Cuibărire

Similar cu sistemul nostru de grilă implicit, Grila noastră CSS permite imbricarea ușoară a .grids. Cu toate acestea, spre deosebire de versiunea implicită, această grilă moștenește modificările în rânduri, coloane și goluri. Luați în considerare exemplul de mai jos:

• Înlocuim numărul implicit de coloane cu o variabilă CSS locală: --bs-columns: 3.
• În prima coloană automată, numărul coloanelor este moștenit și fiecare coloană este o treime din lățimea disponibilă.
• În a doua coloană automată, am resetat numărul de coloane din imbricat .gridla 12 (prestabilit).
• A treia coloană automată nu are conținut imbricat.

În practică, acest lucru permite aspecte mai complexe și personalizate în comparație cu sistemul nostru de grilă implicit.

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

Personalizare

Personalizați numărul de coloane, numărul de rânduri și lățimea golurilor cu variabile CSS locale.

Aceste variabile CSS nu au o valoare implicită; în schimb, ei aplică valori de rezervă care sunt utilizate până când este furnizată o instanță locală. De exemplu, folosim var(--bs-rows, 1)pentru rândurile noastre CSS Grid, care ignoră, --bs-rowsdeoarece nu a fost setat încă nicăieri. Odată ce este, .gridinstanța va folosi acea valoare în loc de valoarea de rezervă a 1.

Fără clase de grilă

Elementele copii imediate ale .gridsunt elemente de grilă, așa că vor fi dimensionate fără a adăuga în mod explicit o .g-colclasă.

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

Coloane și goluri

Ajustați numărul de coloane și decalajul.

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

Adăugarea de rânduri

Adăugarea mai multor rânduri și modificarea plasării coloanelor:

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

Lacune

Modificați golurile verticale numai prin modificarea row-gap. Rețineți că folosim gappe .grids, dar row-gapși column-gappoate fi modificat după cum este necesar.

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

Din acest motiv, puteți avea diferite s- gapuri verticale și orizontale, care pot lua o singură valoare (toate laturile) sau o pereche de valori (verticală și orizontală). Acest lucru poate fi aplicat cu un stil inline pentru gap, sau cu --bs-gapvariabila noastră 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

O limitare a Grilei CSS este că clasele noastre implicite sunt încă generate de două variabile Sass $grid-columnsși $grid-gutter-width. Acest lucru predetermină efectiv numărul de clase generate în CSS-ul nostru compilat. Aveți două opțiuni aici:

• Modificați acele variabile implicite Sass și recompilați-vă CSS.
• Utilizați stiluri inline sau personalizate pentru a mări clasele furnizate.

De exemplu, puteți crește numărul de coloane și puteți modifica dimensiunea decalajului, apoi puteți mări „coloanele” cu un amestec de stiluri inline și clase de coloane CSS Grid predefinite (de exemplu, .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>