Les sous-grilles en CSS

Un abonnement sur mon twitter-X et/ou youtube serait fortement apprécié.

Partagez cet article :

Dernière mise à jour : février 2024

Introduction

Ajoutée dans le deuxième module de CSS grid layout, la valeur subgrid s'avère être une fonctionnalité très pratique dans une mise en page moderne.

En effet, lorsqu'on déclare une disposition en grille, seuls les enfants directs du conteneur de grille deviennent des parties de la mise en page de la grille CSS. Cependant, les éléments à l'intérieur (petits-enfants) des enfants n'héritent pas de la disposition de la grille. La valeur subgrid peut faire en sorte qu'un élément hérite des colonnes et/ou des lignes de son parent.

Il subsite néanmoins un avantage au fait que les éléments à l'intérieur des enfants n'héritent pas des grilles du conteneur. Ainsi, est-il possible de mettre en place un autre module de mise en page, tel que flexbox, ou encore de déclarer une grille indépendante avec des règles d'alignement différentes. C'est d'ailleurs la raison pour laquelle le W3c a hésité à implanter la valeur subgrid dans le premier module du Grid layout.

Cependant, vous serez sans doute confronté à certaines situations qui nécessiteront de créer une sous-grille. Nous allons voir dans cet article les différents cas de figure où les sous-grilles peuvent considérablement nous aider.

Fonctionnement des grilles

Commençons par une simple disposition en grilles et une seconde avec les sous-grilles afin que vous puissiez comprendre l'intérêt de la valeur subgrid :

voir en plein écran

Ce n'est pas évident à constater à première vue, mais si vous faîtes un effort d'attention, vous remarquez alors que les colonnes des éléments à l'intérieur de l'élément enfant 7 s'adaptent à la grille de l'élément parent grâce à la valeur subgrid, ce qui n'est pas le cas sans celle-ci.

Exemple des grilles en CSS — Ci-dessus, un graphique montrant une grille classique en CSS.

Exemple des sous-grilles en CSS — Ci-dessus, un graphique montrant une sous-grille à l'intérieur d'une disposition en grille en CSS.

Voici quelques exemples de ce que peut faire la valeur subgrid :

- Les pistes de la grille imbriquée s'alignent avec celles du parent. (l'exemple qu'on vient juste de voir)

- Il est possible de cibler la ligne de fin de la grille explicite comme dans l'exemple ci-dessous :

Exemple grille explicite subgrid CSS — Ci-dessus, un graphique montrant le ciblage d'une ligne d'une grille explicite en CSS.

Ce qui donne ceci en terme de code :




<div class="grid">

<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>

<div class="subgrid">

<div class="subgrid-item">1</div>
<div class="subgrid-item">2</div>
<div class="subgrid-item">3</div>
<div class="subgrid-item">4</div>
<div class="subgrid-item">5</div>
<div class="subgrid-item">6</div>
<div class="subgrid-item">7</div>
<div class="subgrid-item">8</div>
  
</div>

<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>


</div>





.grid {

display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: minmax(100px, auto);
max-width: 800px;
gap: 10px;
padding: 10px;

}

.grid-item {
  background-color: #6753ea;
  padding: 10px;
}

.subgrid {

  grid-column: 2 / -1; /* on vise la ligne de fin*/
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 10px;
  
}

.subgrid-item {

  background-color: rgba(103, 83, 234, 0.6);
  padding: 10px;
  color: #fff;

}

- Héritage des lignes de grille nommées de la grille parent (il en est de même pour les zones de grille nommées) :

Exemple héritage lignes nommées subgrid CSS — Ci-dessus, un graphique montrant le ciblage d'une ligne d'une grille explicite en CSS.

Ce qui donne ceci en terme de code :





<div class="grid">

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
	
<div class="subgrid">
<div></div>
</div>



	
<div></div>
<div></div>
<div></div>
<div></div>


</div>




.grid {
  display: grid;
  grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d] 1fr [e]; /*on nomme les lignes de grille*/
  grid-auto-rows: minmax(100px, auto);
  max-width: 800px;
  gap: 10px;
  padding: 10px;

}
		
.grid > div {

 background-color: rgba(103, 83, 234, 0.6);
 padding: 10px;
  
}
		
		
.subgrid {
  
grid-column: b / e;
display: grid;
gap: 10px;
grid-template-columns: subgrid;

}
		
		
.subgrid >div {
 
background-color: #6753ea;
grid-column: c / e;
grid-row: 1;

}

- On peut ajouter des noms de ligne à la sous-grille :




.subgrid {
  display: grid;
  grid-template-columns: subgrid [line1] [line2] [line3];
}

- La sous-grille peut avoir des gouttières (propriété gap) de tailles différentes par rapport à son parent. En effet, les espaces s'héritent. Mais il est tout à fait possible de changer la taille de l'espace dans la sous-grille.

Partant de ce postulat, nous allons maintenant voir des exemples qui vont nécessiter l'utilisation des sous-grilles.