Grille CSS

Le système de grille par défaut de Bootstrap représente l'aboutissement de plus d'une décennie de techniques de mise en page CSS, éprouvées et testées par des millions de personnes. Mais, il a également été créé sans la plupart des fonctionnalités et techniques CSS modernes que nous voyons dans les navigateurs comme la nouvelle grille CSS.

Comment ça fonctionne

Avec Bootstrap 5, nous avons ajouté la possibilité d'activer un système de grille séparé basé sur CSS Grid, mais avec une touche Bootstrap. Vous obtenez toujours des cours que vous pouvez appliquer sur un coup de tête pour créer des mises en page réactives, mais avec une approche différente sous le capot.

• CSS Grid est opt-in. Désactivez le système de grille par défaut en définissant $enable-grid-classes: falseet activez la grille CSS en définissant $enable-cssgrid: true. Ensuite, recompilez votre Sass.

• Remplacez les instances de .rowpar .grid. La .gridclasse définit display: gridet crée un grid-templatesur lequel vous construisez avec votre code HTML.

• Remplacez .col-*les classes par des .g-col-*classes. En effet, nos colonnes CSS Grid utilisent la grid-columnpropriété au lieu de width.

• Les tailles des colonnes et des gouttières sont définies via des variables CSS. Définissez-les sur le parent .gridet personnalisez-les comme vous le souhaitez, en ligne ou dans une feuille de style, avec --bs-columnset --bs-gap.

À l'avenir, Bootstrap passera probablement à une solution hybride car la gappropriété a atteint une prise en charge presque complète du navigateur pour flexbox.

Principales différences

Par rapport au système de grille par défaut :

• Les utilitaires Flex n'affectent pas les colonnes CSS Grid de la même manière.

• Gaps remplace les gouttières. La gappropriété remplace l'horizontale paddingde notre système de grille par défaut et fonctionne plus comme margin.

• En tant que tel, contrairement à .rows, .grids n'a pas de marges négatives et les utilitaires de marge ne peuvent pas être utilisés pour modifier les gouttières de la grille. Les écarts de grille sont appliqués horizontalement et verticalement par défaut. Voir la section personnalisation pour plus de détails.

• Les styles en ligne et personnalisés doivent être considérés comme des remplacements pour les classes de modificateurs (par exemple, style="--bs-columns: 3;"vs class="row-cols-3").

• L'imbrication fonctionne de la même manière, mais peut vous obliger à réinitialiser le nombre de colonnes sur chaque instance d'un fichier .grid. Voir la section imbrication pour plus de détails.

Exemples

Trois colonnes

Trois colonnes de largeur égale dans toutes les fenêtres et tous les appareils peuvent être créées à l'aide des .g-col-4classes. Ajoutez des classes réactives pour modifier la disposition en fonction de la taille de la fenêtre.

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

Sensible

Utilisez des classes réactives pour ajuster votre mise en page dans les fenêtres. Ici, nous commençons avec deux colonnes sur les fenêtres les plus étroites, puis passons à trois colonnes sur les fenêtres moyennes et supérieures.

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

Comparez cela à cette disposition à deux colonnes dans toutes les fenêtres.

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

Emballage

Les éléments de la grille passent automatiquement à la ligne suivante lorsqu'il n'y a plus de place horizontalement. Notez que le gaps'applique aux espaces horizontaux et verticaux entre les éléments de la grille.

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

Départs

Les classes de démarrage visent à remplacer les classes de décalage de notre grille par défaut, mais elles ne sont pas tout à fait identiques. CSS Grid crée un modèle de grille à l'aide de styles qui indiquent aux navigateurs de "commencer à cette colonne" et de "se terminer à cette colonne". Ces propriétés sont grid-column-startet grid-column-end. Les classes de démarrage sont un raccourci pour les premiers. Associez-les aux classes de colonnes pour dimensionner et aligner vos colonnes selon vos besoins. Les classes de démarrage commencent à 1as 0est une valeur non valide pour ces propriétés.

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

Colonnes automatiques

Lorsqu'il n'y a pas de classes sur les éléments de la grille (les enfants immédiats d'un .grid), chaque élément de la grille sera automatiquement dimensionné à une colonne.

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

Ce comportement peut être mélangé avec des classes de colonnes de grille.

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

Nidification

Semblable à notre système de grille par défaut, notre grille CSS permet une imbrication facile des .grids. Cependant, contrairement à la grille par défaut, cette grille hérite des modifications apportées aux lignes, aux colonnes et aux espaces. Considérez l'exemple ci-dessous :

• Nous remplaçons le nombre de colonnes par défaut par une variable CSS locale : --bs-columns: 3.
• Dans la première colonne automatique, le nombre de colonnes est hérité et chaque colonne représente un tiers de la largeur disponible.
• Dans la deuxième colonne automatique, nous avons réinitialisé le nombre de colonnes imbriquées .gridà 12 (notre valeur par défaut).
• La troisième colonne automatique n'a pas de contenu imbriqué.

En pratique, cela permet des mises en page plus complexes et personnalisées par rapport à notre système de grille par défaut.

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

Personnalisation

Personnalisez le nombre de colonnes, le nombre de lignes et la largeur des espaces avec des variables CSS locales.

Ces variables CSS n'ont pas de valeur par défaut ; à la place, ils appliquent des valeurs de secours qui sont utilisées jusqu'à ce qu'une instance locale soit fournie. Par exemple, nous utilisons var(--bs-rows, 1)pour nos lignes CSS Grid, qui ignore --bs-rowscar cela n'a encore été défini nulle part. Une fois que c'est le cas, l' .gridinstance utilisera cette valeur au lieu de la valeur de secours de 1.

Aucune classe de grille

Les éléments enfants immédiats de .gridsont des éléments de grille, ils seront donc dimensionnés sans ajouter explicitement de .g-colclasse.

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

Colonnes et lacunes

Ajustez le nombre de colonnes et l'écart.

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

Ajout de lignes

Ajout de lignes supplémentaires et modification de l'emplacement des colonnes :

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

Lacunes

Changez les écarts verticaux uniquement en modifiant le row-gap. Notez que nous utilisons gapon .grids, mais row-gapet column-gappeuvent être modifiés si nécessaire.

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

Pour cette raison, vous pouvez avoir différents s verticaux et horizontaux gap, qui peuvent prendre une seule valeur (tous les côtés) ou une paire de valeurs (vertical et horizontal). Cela peut être appliqué avec un style en ligne pour gap, ou avec notre --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>

Toupet

Une limitation de la grille CSS est que nos classes par défaut sont toujours générées par deux variables Sass, $grid-columnset $grid-gutter-width. Cela prédétermine effectivement le nombre de classes générées dans notre CSS compilé. Vous avez ici deux options :

• Modifiez ces variables Sass par défaut et recompilez votre CSS.
• Utilisez des styles en ligne ou personnalisés pour augmenter les classes fournies.

Par exemple, vous pouvez augmenter le nombre de colonnes et modifier la taille de l'écart, puis dimensionner vos "colonnes" avec un mélange de styles en ligne et de classes de colonnes CSS Grid prédéfinies (par 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>