Comment aligner les lignes de colonnes avec la sous-grille CSS –

Dans cette astuce rapide, nous verrons comment utiliser la fonctionnalité de sous-grille de CSS Grid pour aligner le contenu des boîtes côte à côte.

Remarque : avant de plonger dans la sous-grille, il est important de comprendre les bases de la disposition de la grille. Si vous êtes nouveau sur Grid ou si vous avez besoin d’un rappel, consultez notre guide du débutant sur CSS Grid.

Le problème

L’image ci-dessous montre trois cases consécutives. Ils ont des quantités de contenu différentes, mais ils ont tous la même hauteur grâce à la disposition en grille.

Cependant, les composants de chaque boîte ne s’alignent pas les uns avec les autres, ce qui n’a pas l’air si joli, et Grid ne peut rien y faire. En ce qui concerne Grid, il n’y a qu’une seule rangée de cases et cela n’offre aucun moyen d’aligner le contenu qu’elles contiennent en lignes. Mais en utilisant subgridnous pouvons obtenir le résultat ci-dessous.

Voyons comment utiliser Grid et subgrid pour obtenir ce résultat.

Étape 1 : Configuration

Voici le code HTML de base de notre démo :

<article>
  <section></section>
  <section></section>
  <section></section>
</article>

Nous avons et <article> emballage contenant trois <section> éléments. Le <article> a le CSS suivant :

article {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Ce CSS provoque le <section> éléments à disposer en trois colonnes.

Chaque <section> contient un <h1>un <ul> et un <div>:

<section>
  <h1></h1>
  <ul></ul>
  <div></div>
</section>

À ce stade, chaque colonne de la grille a en fait la même hauteur, mais chaque colonne n’est pas pleine de contenu, comme indiqué ci-dessous.

Il y a une quantité de contenu différente dans chaque colonne, donc ils ne semblent pas avoir la même hauteur.

Etape 2 : Paramétrage de l’affichage : grille sur les sections

Nous ne pouvons utiliser que le subgrid valeur sur un élément défini sur display: grid. Comme nous voulons utiliser subgrid pour aligner le contenu de notre <section> éléments, nous devons donc les définir sur display: grid d’abord:

section {
  display: grid;
}

Le contenu remplit désormais chacune de nos colonnes, comme indiqué dans l’inspecteur.

Voici notre démo mise à jour.

Remarque : le contenu est étiré sur toute la hauteur car le paramètre par défaut pour les colonnes est align-content: stretch. (Ce n’est pas important pour cette démo, mais cela vaut quand même la peine d’être noté !)

Étape 3 : Utilisation de la sous-grille pour aligner le contenu

La dernière étape consiste à aligner les trois éléments de chaque colonne en lignes. Dans un premier temps, nous fixons le grid-template-rows propriété à subgrid:

section {
  display: grid;
  grid-template-rows: subgrid;
}

Cela produit le résultat illustré ci-dessous.

Oops! Qu’est-ce qui ne va pas ici ? Nous ne pouvons voir que le dernier élément de chaque colonne.

Le problème est que notre <article> L’élément n’a qu’une seule ligne, donc les éléments de chaque section sont empilés les uns sur les autres dans cette ligne.

La dernière étape que nous devons franchir consiste à indiquer au contenu de la sous-grille de s’étendre sur trois lignes :

section {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Notre contenu s’étend désormais sur trois lignes de la sous-grille, comme indiqué ci-dessous.

Mais regardez, il y a des écarts entre chaque rangée ! C’est parce que subgrid hérite du paramètre d’écart de sa grille parent. Nous pouvons changer cela en définissant un autre gap valeur. Si nous appliquons gap: 0 à notre <section> éléments, nous obtenons le résultat final que nous recherchons.

Voici notre démo terminée.

En remarque, une alternative à grid-row: span 3 serait grid-row: 1 / 3.

Prise en charge du navigateur

Depuis fin 2023, subgrid a fonctionné sur tous les principaux navigateurs, comme expliqué sur le site canin. Il est donc tout à fait viable de commencer à utiliser subgrid maintenant.

Pour les navigateurs prenant en charge Grid mais pas subgrid, vous obtiendrez probablement un résultat acceptable. Notre démo originale ci-dessus était tout à fait acceptable, même si elle semble plus agréable à aligner le contenu horizontalement.

Pour les navigateurs qui ne prennent pas du tout en charge la disposition en grille, les utilisateurs doivent obtenir un contenu parfaitement utilisable dans une seule colonne.

Conclusion

Le subgrid la valeur peut être définie pour grid-template-columns et/ou grid-template-rows, permettant au contenu de la sous-grille de s’aligner sur les colonnes et les lignes des grilles parentes. Comme vous pouvez le voir, subgrid est assez facile à utiliser mais constitue un ajout puissant et indispensable aux mises en page de grille.

Pour en savoir plus sur tout ce que vous pouvez faire avec subgridconsultez les ressources suivantes :