Quadrícula CSS

El sistema de graella predeterminat de Bootstrap representa la culminació de més d'una dècada de tècniques de disseny CSS, provades i provades per milions de persones. Però també es va crear sense moltes de les funcions i tècniques CSS modernes que estem veient en navegadors com la nova quadrícula CSS.

Com funciona

Amb Bootstrap 5, hem afegit l'opció d'habilitar un sistema de graella independent que es basa en CSS Grid, però amb un gir de Bootstrap. Encara rebeu classes que podeu aplicar per capritx per crear dissenys sensibles, però amb un enfocament diferent sota el capó.

• CSS Grid està activat. Desactiveu el sistema de quadrícula predeterminat configurant $enable-grid-classes: falsei activeu la quadrícula CSS configurant $enable-cssgrid: true. A continuació, recompileu el vostre Sass.

• Substitueix les instàncies de .rowper .grid. La .gridclasse estableix display: gridi crea un grid-templateque es construeix amb el vostre HTML.

• Substituïu .col-*les classes per .g-col-*classes. Això es deu al fet que les nostres columnes CSS Grid utilitzen la grid-columnpropietat en lloc de width.

• Les mides de columnes i canalons s'estableixen mitjançant variables CSS. Establiu-los al pare .gridi personalitzeu-los com vulgueu, en línia o en un full d'estil, amb --bs-columnsi --bs-gap.

En el futur, Bootstrap probablement passarà a una solució híbrida, ja que la gappropietat ha aconseguit un suport gairebé complet del navegador per a flexbox.

Diferències clau

En comparació amb el sistema de graella predeterminat:

• Les utilitats Flex no afecten les columnes CSS Grid de la mateixa manera.

• Els buits substitueixen els canalons. La gappropietat substitueix l'horitzontal paddingdel nostre sistema de quadrícula predeterminat i funciona més com margin.

• Com a tal, a diferència .rowde s, .grids no tenen marges negatius i les utilitats de marge no es poden utilitzar per canviar els canals de la xarxa. Els buits de la quadrícula s'apliquen horitzontalment i verticalment per defecte. Consulteu la secció de personalització per obtenir més detalls.

• Els estils en línia i personalitzats s'han de veure com a substituts de les classes modificadores (p. ex., style="--bs-columns: 3;"vs class="row-cols-3").

• L'imbricació funciona de la mateixa manera, però pot ser que us obligeu a restablir els comptes de columnes a cada instància d'un fitxer .grid. Consulteu la secció de nidificació per obtenir més informació.

Exemples

Tres columnes

Es poden crear tres columnes d'amplada igual a totes les finestres i dispositius utilitzant les .g-col-4classes. Afegiu classes responsives per canviar el disseny per mida de la finestra gràfica.

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

Responent

Utilitzeu classes responsives per ajustar el vostre disseny a les finestres físiques. Aquí comencem amb dues columnes a les finestres més estretes, i després creixem fins a tres columnes a les finestres mitjanes i superiors.

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

Compareu-ho amb aquest disseny de dues columnes a totes les finestres físiques.

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

Embolcall

Els elements de la quadrícula s'ajusten automàticament a la línia següent quan no hi ha més espai horitzontalment. Tingueu en compte que gaps'aplica als espais horitzontals i verticals entre els elements de la quadrícula.

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

Comença

Les classes inicials tenen com a objectiu substituir les classes de compensació de la graella predeterminada, però no són del tot iguals. CSS Grid crea una plantilla de quadrícula a través d'estils que diuen als navegadors que "comencen en aquesta columna" i "acabin en aquesta columna". Aquestes propietats són grid-column-starti grid-column-end. Les classes inicials són una abreviatura de les primeres. Combina'ls amb les classes de columnes per dimensionar i alinear les teves columnes com vulguis. Les classes d'inici comencen a 1les que 0és un valor no vàlid per a aquestes propietats.

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

Columnes automàtiques

Quan no hi ha classes als elements de la quadrícula (els fills immediats d'un .grid), cada element de la quadrícula s'ajustarà automàticament a una columna.

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

Aquest comportament es pot combinar amb classes de columnes de graella.

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

Nidificació

De manera similar al nostre sistema de quadrícula predeterminat, la nostra quadrícula CSS permet una fàcil nidificació de .grids. Tanmateix, a diferència del predeterminat, aquesta quadrícula hereta els canvis a les files, columnes i espais. Considereu l'exemple següent:

• Substituïm el nombre predeterminat de columnes amb una variable CSS local: --bs-columns: 3.
• A la primera columna automàtica, el nombre de columnes s'hereta i cada columna és un terç de l'amplada disponible.
• A la segona columna automàtica, hem restablert el recompte de columnes de l'imbricat .grida 12 (el nostre predeterminat).
• La tercera columna automàtica no té contingut imbricat.

A la pràctica, això permet dissenys més complexos i personalitzats en comparació amb el nostre sistema de graella predeterminat.

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

Personalització

Personalitzeu el nombre de columnes, el nombre de files i l'amplada dels buits amb variables CSS locals.

Aquestes variables CSS no tenen valor per defecte; en canvi, apliquen valors de reserva que s'utilitzen fins que es proporciona una instància local. Per exemple, fem servir var(--bs-rows, 1)per a les nostres files CSS Grid, que ignora --bs-rowsperquè encara no s'ha establert enlloc. Un cop ho sigui, la .gridinstància utilitzarà aquest valor en lloc del valor alternatiu de 1.

No hi ha classes de graella

Els elements secundaris immediats de .gridsón elements de quadrícula, de manera que tindran la mida sense afegir una .g-colclasse explícitament.

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

Columnes i buits

Ajusteu el nombre de columnes i el buit.

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

Afegint files

Afegiu més files i canvieu la ubicació de les columnes:

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

Buits

Canvieu els espais verticals només modificant el row-gap. Tingueu en compte que fem servir gapa .grids, però row-gapi column-gapes poden modificar segons sigui necessari.

<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 això, podeu tenir diferents gaps verticals i horitzontals, que poden prendre un sol valor (tots els costats) o un parell de valors (vertical i horitzontal). Això es pot aplicar amb un estil en línia per a gap, o amb la nostra --bs-gapvariable 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 limitació de la quadrícula CSS és que les nostres classes predeterminades encara es generen per dues variables Sass $grid-columnsi $grid-gutter-width. Això predetermina efectivament el nombre de classes generades al nostre CSS compilat. Aquí teniu dues opcions:

• Modifiqueu aquestes variables Sass predeterminades i recompileu el vostre CSS.
• Utilitzeu estils en línia o personalitzats per augmentar les classes proporcionades.

Per exemple, podeu augmentar el recompte de columnes i canviar la mida del buit, i després dimensionar les vostres "columnes" amb una combinació d'estils en línia i classes de columnes de quadrícula CSS predefinides (per exemple, .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>