Griglia CSS

U sistema di griglia predeterminatu di Bootstrap rapprisenta a culminazione di più di una dicada di tecniche di layout CSS, pruvati è pruvati da milioni di persone. Ma, hè statu ancu creatu senza parechje di e funzioni è tecniche CSS muderni chì vedemu in i navigatori cum'è a nova CSS Grid.

Cumu funziona

Cù Bootstrap 5, avemu aghjustatu l'opzione per attivà un sistema di griglia separatu chì hè custruitu nantu à CSS Grid, ma cù una torsione Bootstrap. Avete sempre e classi chì pudete applicà nantu à un capriccio per custruisce layout responsive, ma cù un approcciu sfarente sottu u cappucciu.

• CSS Grid hè opt-in. Disattivate u sistema di griglia predeterminatu cunfiguendu $enable-grid-classes: falseè attivate a Griglia CSS parendu $enable-cssgrid: true. Allora, ricompilate u vostru Sass.

• Sustituisci istanze di .rowcù .grid. A .gridclassa stabilisce display: gridè crea un grid-templatechì custruite cù u vostru HTML.

• Sustituisce .col-*e classi cù .g-col-*classi. Questu hè chì e nostre colonne CSS Grid utilizanu a grid-columnpruprietà invece di width.

• E culonni è e dimensioni di a cantina sò stabilite via variabili CSS. Pone questi nantu à u genitore .gridè persunalizà cumu vulete, in linea o in una foglia di stile, cù --bs-columnsè --bs-gap.

In u futuru, Bootstrap prubabilmente passà à una soluzione hibrida postu chì a gappruprietà hà ottenutu un supportu di navigatore quasi cumpletu per flexbox.

Differenze chjave

Comparatu à u sistema di griglia predeterminatu:

• L'utilità Flex ùn affettanu micca e colonne CSS Grid in u listessu modu.

• Gap rimpiazza i gutters. A gappruprietà rimpiazza l'orizontale paddingda u nostru sistema di griglia predeterminatu è funziona più cum'è margin.

• Comu tali, à u cuntrariu .rowdi s, .grids ùn anu micca margini negativi è l'utilità di marghjini ùn ponu micca esse aduprate per cambià i canali di griglia. I spazii di griglia sò applicati orizontali è verticali per difettu. Vede a sezione di persunalizazione per più dettagli.

• I stili in linea è persunalizati devenu esse visti cum'è rimpiazzamenti per e classi di modificatori (per esempiu, style="--bs-columns: 3;"vs class="row-cols-3").

• A nidificazione funziona in modu simile, ma pò esse bisognu di resettate i vostri cunti di colonna in ogni istanza di un .grid. Vede a sezione di nidificazione per i dettagli.

Esempii

Trè culonni

Trè culonni di uguale larghezza in tutti i vetri è i dispositi ponu esse creati usendu e .g-col-4classi. Aghjunghjite classi responsive per cambià u layout per dimensione di vista.

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

Risposta

Aduprate classi responsive per aghjustà u vostru layout in tutte e finestre. Quì avemu principiatu cù dui culonni nantu à i viewports più stretti, è poi cresce à trè culonni nantu à i viewports mediu è sopra.

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

Paragunate quellu à questa disposizione di duie colonne in tutti i vetri.

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

Imballaggio

L'articuli di a griglia si avvolgenu automaticamente à a linea dopu quandu ùn ci hè più spaziu in orizzontale. Nota chì l' gapapplica à i spazii horizontali è verticali trà l'articuli di griglia.

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

Accumincia

E classi di partenza anu u scopu di rimpiazzà e classi di offset di a nostra griglia predeterminata, ma ùn sò micca completamente listessi. CSS Grid crea un mudellu di griglia per mezu di stili chì dicenu à i navigatori di "cumincià da sta colonna" è "finisce à sta colonna". Queste proprietà sò grid-column-startè grid-column-end. E classi di partenza sò una stenografia per i primi. Accoppiateli cù e classi di colonna per dimensionà è allineate e vostre colonne cumu avete bisognu. E classi di partenza cumincianu à 1cum'è 0un valore invalidu per queste proprietà.

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

Culonni auto

Quandu ùn ci sò micca classi nantu à l'articuli di griglia (i figlioli immediati di un .grid), ogni articulu di a griglia serà automaticamente dimensionatu à una colonna.

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

Stu cumpurtamentu pò esse mischju cù classi di colonna di griglia.

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

Nidificazione

Simile à u nostru sistema di griglia predeterminatu, u nostru CSS Grid permette un nesting faciule di .grids. Tuttavia, à u cuntrariu di u predeterminatu, sta griglia eredita i cambiamenti in e fila, colonne è spazii. Cunsiderate l'esempiu quì sottu:

• Override u numeru predeterminatu di colonne cù una variabile CSS locale: --bs-columns: 3.
• In a prima auto-columna, u conte di colonna hè ereditatu è ogni culonna hè un terzu di a larghezza dispunibule.
• In a seconda colonna automatica, avemu resettatu u conte di colonna nantu à u nidificatu .gridà 12 (u nostru predeterminatu).
• A terza colonna automatica ùn hà micca cuntenutu nidificatu.

In pratica, questu permette layout più cumplessi è persunalizati cumparatu cù u nostru sistema di griglia predeterminatu.

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

Customizing

Personalizà u nùmeru di colonne, u numeru di fila è a larghezza di i spazii cù variabili CSS lucali.

Queste variabili CSS ùn anu micca valore predeterminatu; invece, applicanu i valori di fallback chì sò usati finu à chì una istanza lucale hè furnita. Per esempiu, usemu var(--bs-rows, 1)per e nostre file CSS Grid, chì ignora --bs-rowsperchè ùn hè micca statu stabilitu in ogni locu. Una volta hè, l' .gridistanza utilizerà quellu valore invece di u valore di fallback di 1.

Nisuna classi di griglia

Elementi di i zitelli immediati sò elementi di .gridgriglia, cusì seranu dimensionati senza aghjunghje esplicitamente una .g-colclasse.

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

Culonni è spazii

Aghjustate u nùmeru di colonne è u gap.

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

Agghiuncennu fila

Aghjunghjendu più fila è cambià a piazza di e colonne:

<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

Cambia i spazii verticali solu mudificà u row-gap. Nota chì avemu aduprà gapnantu à .grids, ma row-gapè column-gappò esse mudificatu quantu bisognu.

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

Per quessa, pudete avè diverse gaps verticali è horizontali, chì ponu piglià un valore unicu (tutti i lati) o un paru di valori (verticale è horizontale). Questu pò esse appiicatu cù un stile inline per gap, o cù a nostra --bs-gapvariabile 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

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