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 travaglia

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.

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

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

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

<div class="grid text-center">
  <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 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>

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. I corsi 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 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>

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

Stu cumpurtamentu pò esse mischju cù classi di colonna di 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

Similar to our default grid system, our CSS Grid allows for easy nesting of .grids. However, unlike the default, this grid inherits changes in the rows, columns, and gaps. Consider the example below:

• We override the default number of columns with a local CSS variable: --bs-columns: 3.
• In the first auto-column, the column count is inherited and each column is one-third of the available width.
• In the second auto-column, we’ve reset the column count on the nested .grid to 12 (our default).
• The third auto-column has no nested content.

In practice this allows for more complex and custom layouts when compared to our default grid system.

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

Customizing

Customize the number of columns, the number of rows, and the width of the gaps with local CSS variables.

These CSS variables have no default value; instead, they apply fallback values that are used until a local instance is provided. For example, we use var(--bs-rows, 1) for our CSS Grid rows, which ignores --bs-rows because that hasn’t been set anywhere yet. Once it is, the .grid instance will use that value instead of the fallback value of 1.

No grid classes

Immediate children elements of .grid are grid items, so they’ll be sized without explicitly adding a .g-col class.

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

Columns and gaps

Adjust the number of columns and the gap.

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

Adding rows

Adding more rows and changing the placement of columns:

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

Gaps

Change the vertical gaps only by modifying the row-gap. Note that we use gap on .grids, but row-gap and column-gap can be modified as needed.

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

Because of that, you can have different vertical and horizontal gaps, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for gap, or with our --bs-gap CSS variable.

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