Griglia CSS

Il sistema di griglia predefinito di Bootstrap rappresenta il culmine di oltre un decennio di tecniche di layout CSS, provate e testate da milioni di persone. Ma è stato creato anche senza molte delle moderne funzionalità e tecniche CSS che vediamo nei browser come il nuovo CSS Grid.

Come funziona

Con Bootstrap 5, abbiamo aggiunto l'opzione per abilitare un sistema di griglia separato basato su CSS Grid, ma con una svolta Bootstrap. Ottieni ancora classi che puoi applicare in un capriccio per creare layout reattivi, ma con un approccio diverso sotto il cofano.

• La griglia CSS è attiva. Disabilita il sistema di griglia predefinito impostando $enable-grid-classes: falsee abilita la griglia CSS impostando $enable-cssgrid: true. Quindi, ricompila il tuo Sass.

• Sostituisci le istanze di .rowcon .grid. La .gridclasse imposta display: gride crea un grid-templatecodice su cui costruire con il tuo HTML.

• Sostituisci .col-*le classi con .g-col-*le classi. Questo perché le nostre colonne Griglia CSS usano la grid-columnproprietà invece di width.

• Le dimensioni delle colonne e della grondaia vengono impostate tramite variabili CSS. Impostali sul genitore .gride personalizzali come preferisci, in linea o in un foglio di stile, con --bs-columnse --bs-gap.

In futuro, Bootstrap probabilmente passerà a una soluzione ibrida poiché la gapproprietà ha ottenuto un supporto browser quasi completo per flexbox.

Differenze chiave

Rispetto al sistema di griglia predefinito:

• Le utilità Flex non influiscono allo stesso modo sulle colonne della griglia CSS.

• Le lacune sostituiscono le grondaie. La gapproprietà sostituisce l'orizzontale paddingdal nostro sistema di griglia predefinito e funziona in modo più simile a margin.

• Pertanto, a differenza .rowdi s, .grids non ha margini negativi e le utilità di margine non possono essere utilizzate per modificare le grondaie della griglia. Gli spazi vuoti della griglia vengono applicati orizzontalmente e verticalmente per impostazione predefinita. Vedere la sezione personalizzazione per maggiori dettagli.

• Gli stili in linea e personalizzati dovrebbero essere visti come sostituti delle classi di modificatori (ad esempio, style="--bs-columns: 3;"vs class="row-cols-3").

• La nidificazione funziona in modo simile, ma potrebbe essere necessario reimpostare i conteggi delle colonne su ogni istanza di un file nidificato .grid. Vedere la sezione nidificazione per i dettagli.

Esempi

Tre colonne

È possibile creare tre colonne di uguale larghezza in tutte le finestre e i dispositivi utilizzando le .g-col-4classi. Aggiungi classi reattive per modificare il layout in base alle dimensioni della finestra.

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

reattivo

Usa le classi reattive per regolare il layout tra le finestre. Qui iniziamo con due colonne nelle viste più strette, per poi passare a tre colonne nelle viste medie e superiori.

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

Confrontalo con questo layout a due colonne in tutte le finestre.

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

Avvolgimento

Gli elementi della griglia si spostano automaticamente alla riga successiva quando non c'è più spazio in orizzontale. Si noti che gapsi applica agli spazi orizzontali e verticali tra gli elementi della griglia.

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

Inizia

Le classi iniziali mirano a sostituire le classi di offset della nostra griglia predefinita, ma non sono del tutto le stesse. CSS Grid crea un modello di griglia attraverso stili che dicono ai browser di "iniziare in questa colonna" e "finire in questa colonna". Queste proprietà sono grid-column-starte grid-column-end. Le classi di inizio sono una scorciatoia per i primi. Abbinali alle classi di colonne per ridimensionare e allineare le colonne come preferisci. Le classi di inizio iniziano da 1come 0è un valore non valido per queste proprietà.

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

Colonne automatiche

Quando non ci sono classi sugli elementi della griglia (i figli immediati di a .grid), ogni elemento della griglia verrà automaticamente ridimensionato su una colonna.

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

Questo comportamento può essere combinato con le classi di colonne della griglia.

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

Nidificazione

Simile al nostro sistema di griglia predefinito, la nostra griglia CSS consente un facile annidamento di .grids. Tuttavia, a differenza dell'impostazione predefinita, questa griglia eredita le modifiche nelle righe, nelle colonne e negli spazi vuoti. Considera l'esempio seguente:

• Sovrascriviamo il numero predefinito di colonne con una variabile CSS locale: --bs-columns: 3.
• Nella prima colonna automatica, il conteggio delle colonne viene ereditato e ciascuna colonna è un terzo della larghezza disponibile.
• Nella seconda colonna automatica, abbiamo reimpostato il conteggio delle colonne sul nidificato .grida 12 (il nostro valore predefinito).
• La terza colonna automatica non ha contenuto nidificato.

In pratica ciò consente layout più complessi e personalizzati rispetto al nostro sistema di griglia predefinito.

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

Personalizzazione

Personalizza il numero di colonne, il numero di righe e la larghezza degli spazi vuoti con le variabili CSS locali.

Queste variabili CSS non hanno un valore predefinito; invece, applicano valori di fallback utilizzati fino a quando non viene fornita un'istanza locale. Ad esempio, utilizziamo var(--bs-rows, 1)per le nostre righe della griglia CSS, che ignora --bs-rowsperché non è stato ancora impostato da nessuna parte. Una volta che lo è, l' .gridistanza utilizzerà quel valore invece del valore di fallback di 1.

Nessuna classe di griglia

Gli elementi figli immediati di .gridsono elementi della griglia, quindi verranno ridimensionati senza aggiungere esplicitamente una .g-colclasse.

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

Colonne e lacune

Regola il numero di colonne e il divario.

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

Aggiunta di righe

Aggiunta di più righe e modifica del posizionamento delle colonne:

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

Lacune

Cambia gli spazi verticali solo modificando il row-gap. Nota che usiamo gapsu .grids, ma row-gape column-gappuò essere modificato secondo necessità.

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

Per questo motivo, puoi avere diverse gaps verticali e orizzontali, che possono assumere un singolo valore (tutti i lati) o una coppia di valori (verticale e orizzontale). Questo può essere applicato con uno stile inline per gapo con la nostra --bs-gapvariabile 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

Una limitazione della griglia CSS è che le nostre classi predefinite sono ancora generate da due variabili Sass $grid-columnse $grid-gutter-width. Questo predetermina efficacemente il numero di classi generate nel nostro CSS compilato. Hai due opzioni qui:

• Modifica quelle variabili Sass predefinite e ricompila il tuo CSS.
• Usa stili in linea o personalizzati per aumentare le classi fornite.

Ad esempio, puoi aumentare il conteggio delle colonne e modificare la dimensione dello spazio vuoto, quindi ridimensionare le tue "colonne" con un mix di stili in linea e classi di colonne della griglia CSS predefinite (ad esempio, .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>