Flexbox devrait maintenant être connu de tou·te·s et a déjà permis à de nombreux développeur·euse·s de passer une nuit tranquille. Mais que se passerait-il si tu pouvais étendre ta mise en page Flexbox non seulement verticalement mais aussi horizontalement ? Tout ceci, et bien plus encore, est possible depuis l'intégration de CSS Grid.

Imagine qu'il existe un moyen de concevoir librement ton site web dans une grille bidimensionnelle, en créant par exemple des blocs de texte qui recouvrent partiellement les images, ou encore des galeries d'images plus complexes sans marge négative ni positionnement. Ou imagine qu'avec l'aide de CSS, tu peux rapidement concevoir des modèles de page qui sont également réactifs. Il existe une solution à tout cela : CSS Grid.

Qu'est-ce que CSS Grid ?

Tout comme Flexbox, CSS Grid est également intégré à l'aide d'un élément conteneur et d'éléments CSS Grid. Par exemple, nous trouvons également certaines propriétés pour le positionnement de la Flexbox : align-items, justify items, justify self et align-self. Ils t'aident à positionner le contenu de ta grille en conséquence.

Grosso modo, CSS Grid est une flexbox qui fonctionne en deux dimensions :

Alors qu'avec Flexbox, nous ne pouvons construire les lignes et les colonnes correspondantes qu'horizontalement, CSS Grid nous donne la possibilité de les disposer également verticalement :

À première vue, CSS Grid peut sembler relativement peu spectaculaire. Après tout, tu peux obtenir le même résultat avec des lignes et des colonnes.

Qu'est-ce qui rend CSS Grid si spécial ?

Grâce au nouveau système de grille, tu peux créer toutes les combinaisons imaginables. La seule condition est qu'elles doivent être rectangulaires. Les formes en L pures, par exemple, ne peuvent pas être construites.

Tu peux ainsi planifier et construire l'ensemble de ta mise en page sur la base de CSS Grid. Les grilles imbriquées sont tout aussi possibles que la combinaison de CSS Grid et Flexbox.

Grâce à une planification intelligente, tu peux désormais programmer tes mises en page de manière à te passer autant que possible des media queries, mais tu n'es bien sûr pas obligé·e de le faire. J'examine plus en détail les différentes possibilités par la suite dans cet article.

CSS Grid s'accompagne également d'un certain nombre d'autres nouvelles astuces CSS qui te faciliteront la vie à l'avenir. L'une d'entre elles est la nouvelle unité CSS : la fraction (fr). Cela fonctionne de la même manière que la division de la taille des éléments de la flexbox. 

Une fraction (1fr) est une partie d'une ligne entière. Ainsi, si tu divises ta grille en 3×4 comme dans l'exemple ci-dessous de CSS Tricks, alors 1fr = ¼ ou 25 %.

Une autre particularité apparaît également ici : toutes les cases ne doivent pas nécessairement être remplies de contenu. Tu peux également attribuer du contenu vide dans la grille CSS :

W3Schools montre d'autres mises en page possibles pour lesquelles les grilles CSS sont adaptées. De cette façon, nous pouvons facilement déterminer que certains éléments doivent se répartir horizontalement et verticalement sur un certain nombre de cases. Les cases peuvent avoir des largeurs (colonnes) et des hauteurs (rangées) différentes.

Dans l'exemple ci-dessus, la première colonne occupe plus de largeur en pourcentage que les autres. Cela est dû au fait que la largeur n'a pas été prédéfinie dans le CSS et qu'elle est donc automatiquement orientée vers le contenu. La même chose se produirait si nous créions plus de contenu que ce que nous avons prédéfini dans le CSS. La grille s'agrandit alors automatiquement et ajoute le nouveau contenu.

Les univers d'achat de Shopware sont basés sur un système de type CSS Grid, du moins dans la vue d'arrière-plan. Dans leur WYSIWYG Editor, le contenu peut être affiché dans une grille qui, à première vue, ressemble beaucoup à CSS Grid. Dans la page compilée, cependant, aucune grille CSS n'est utilisée, du moins par défaut.

Depuis 2017, CSS Grid est prise en charge par presque tous les navigateurs courants. Seules les versions d'Internet Explorer à partir de 10 ont encore besoin du préfixe -ms- pour pouvoir afficher la grille CSS presque entièrement. Microsoft Edge, quant à lui, dispose déjà d'une intégration complète. Désormais, plus rien ne s'oppose à l'utilisation de CSS Grid dans tes futurs projets :

À quoi ressemble CSS Grid dans la pratique ?

Comme nous l'avons déjà indiqué, nous utilisons la fonction de base de manière similaire à la flexbox. Tout d'abord, nous déterminons un conteneur auquel nous attribuons les fonctions de la grille.

.container {
		display: grid;}

Il existe de nombreuses autres valeurs que tu peux attribuer pour construire la grille selon tes souhaits :

grid-template-columns, grid-template-rows et grid-template-areas (collectivement, ces éléments peuvent également être définis avec grid-template). Ces propriétés contiennent des informations sur le nombre et la taille des lignes et des colonnes. Tu peux également définir les distances entre eux avec les propriétés column-gap et row-gap (ou gap en abrégé).

Tu as également la possibilité - similaire à la flexbox - de déterminer le positionnement global au sein de la grille. À cette fin, il existe les propriétés justify-items, align-items (abrégé : place-items), justify-content, align-content-content (abrégé : place-content).

Avec la propriété grid-auto-flow, tu peux aussi déterminer dans quelle direction ta grille doit s'écouler avec les valeurs row, column ou dense. Alors que row et column s'occupent respectivement de l'alignement horizontal et vertical, dense détermine que ta grille est remplie de manière économique. Cela signifie qu'avec cette valeur, la disposition de tes éléments dans la grille peut changer pour remplir l'espace vide. Cette fonctionnalité est particulièrement intéressante pour les galeries d'images. Ainsi, les éléments peuvent être déplacés dans les différentes tailles d'écran et il n'y a pas de vides visuels.

Alors que tu définis les colonnes et les lignes du conteneur, ainsi que les distances entre elles, tu utilises les éléments de la grille pour déterminer exactement où ils doivent être placés dans la grille. 

Une grille terminée pourrait alors ressembler à ceci du côté CSS :

.container {
		display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 40px;
grid-template-rows: 25% 100px auto;
gap: .5rem .8rem
justify-items: stretch;}

Maintenant que tu as créé ton conteneur de grille, il est temps de le remplir avec les éléments de la grille. La particularité du système de grille CSS est que la disposition dans le HTML peut être secondaire car tu peux donner à chaque élément des coordonnées de début et de fin. Cela se fait avec grid-column-start, grid-column-end, grid-row-start, grid-row-end.

Les coordonnées pointent vers les lignes de la grille et comptent de gauche à droite, ou de haut en bas. Elles peuvent également être abrégées en grid-column  et  grid-row. 

Les utilisateur·rice·s avancé·e·s peuvent également utiliser grid-area pour donner à ces champs toutes les coordonnées en une seule fois ou attribuer un nom à ton élément de grille, dont tu pourras ensuite déterminer toi-même l'emplacement dans le conteneur de la grille. Tu peux nommer bien plus que les éléments de la grille. Il est également possible d'attribuer des noms aux lignes de la grille afin que tu puisses indiquer aux éléments de la grille leurs coordonnées à l'aide de ces noms. Cela t'évite de devoir compter dans la grille.

L'utilisation de valeurs négatives ou le fait de compter de gauche à droite, de bas en haut sont possibles. Cependant, elles sont plus intéressantes pour les utilisateur·rice·s avancé·e·s de CSS Grid et peuvent être lues en détail ici :

• Nommer les lignes de la grille

• Nommer les zones de la grille

Enfin, tu as également la possibilité de déterminer individuellement le positionnement des contenus à l'intérieur des éléments de la grille. Ceci est fait avec les propriétés : justify-self et align-self (en bref : place-self).

Un objet de grille en CSS pourrait ressembler à ça :

.item-a {
		grid-column-start: 1;
  		grid-column-end: span 4;
  		grid-row-start: 2;
  		grid-row-end: span 2;
align-self: center;}

La grille en bout de ligne et la grille en bout de colonne peuvent également être utilisées avec "span +n". Tu t'épargnes ainsi un fastidieux comptage des lignes. "Span 2" indique à l'élément qu'il doit s'étendre sur deux champs de la grille. Tu trouveras des explications détaillées sur les différentes propriétés dans le guide de CSS Tricks.

Exemples sur le web

Si tu es comme moi du type visuel, tu as besoin de voir des exemples concrets pour bien comprendre la grille CSS. Pour ce faire, j'ai parcouru un peu l'internet pour trouver des pages qui ont été créées avec CSS Grid ou qui pourraient bénéficier de son utilisation.

Levon Biss a utilisé CSS Grid comme outil de mise en œuvre pour créer son portfolio. Si tu regardes de plus près sa page avec l'outil d'analyse, tu remarqueas que la page a été construite avec des systèmes de grille imbriqués. Tout d'abord, la page a été divisée en trois sections : en-tête, élément principal et pied de page. La hauteur de l'en-tête et du pied de page a été prédéfinie, tandis que la partie principale, dont la valeur est "auto", peut s'adapter au contenu. Les colonnes ont été définies avec 1fr sur toute la largeur disponible.

.page-wrap {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 96px auto 72px;
}

L'essentiel de sa page était à nouveau emballé dans un système de grille. Remarque comment les unités CSS px et fr ont été mélangées ici. De cette façon, les bordures ont une largeur fixe de 144px chacune, tandis que la partie centrale reste flexible.

.gallery-wrap{
   display: grid;
   grid-template-columns: 144px 1fr 144px;
   grid-template-rows: 1fr;
   height: 100%;
}

Enfin, la galerie a également été emboîtée une fois de plus. Auparavant, aucune valeur n'était donnée pour les écarts de grille. Pour la galerie, ils ont maintenant été fixés à 1em. Cela évite d'ajouter une marge entre les images. Tu peux donc définir les écarts une fois dans le document. 

.grid {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-gap: 1em;
}

Une autre particularité de CSS Grid est la fonction repeat(). Il s'agit d'une notation abrégée des valeurs répétées. 

Repeat() prend l'ensemble des valeurs à créer comme première valeur et la taille comme seconde valeur. Par écrit, cela ressemblerait à ceci :

.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

Dans cet exemple, aucune grille CSS n'a été utilisée. Comme dans l'exemple précédent, nous aurions pu imbriquer la grille ou ajouter une marge au conteneur de la grille pour l'espacement extérieur.

Voici à quoi pourrait ressembler la division de la grille : 

Une approche possible de CSS peut ressembler à ceci :

.container {
  margin: 0.5em 3em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px 80px auto;
	gap: .5rem;
}

.logo {
  grid-area: 1 / 1 / 2 / span 3;
  justify-self: start;
}
.nav {
  grid-area: 1 / 4 / 2 / span 3;
  justify-self: end;
}
.header {
  grid-area: 2 / 1 / 3 / span 6;
  justify-self: center;
}
.logo,
.nav,
.header {
  	align-self: center;
}
.img {
  grid-column: span 2;
  grid-row: span 2;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Bien que l'ensemble du site web de Larq aurait pu bénéficier de la grille CSS, je n'ai sélectionné qu'une petite zone à des fins d'illustration. C'est précisément ici que l'avantage d'une grille bidimensionnelle devient très clair.

Voici à quoi pourrait ressembler la répartition des éléments de la grille :

Une approche possible de CSS peut ressembler à ceci :

.container {
  margin: 0.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 50px repeat(3, 1fr);
  grid-template-rows: 3rem 20px 100px 100px;
  gap: 1rem;
}

.heading {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 1;
  justify-self: center;
}
.img-a {
  grid-area: 3 / 1 / span 2 / span 1;
}
.img-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.img-c {
  grid-area: 4 / 2 / span 1 / span 1;
}
.textblock {
  grid-area: -3 / -4 / span 2 / span 2;
  align-self: center;
}

Unir la grille CSS et WordPress

Avec le nouvel éditeur WordPress, le contenu peut désormais aussi être affiché en lignes et en colonnes par défaut. Cependant, la mise en page me rappelle davantage Bootstrap et consorts et la bidimensionnalité me manque un peu. C'est probablement ce que d'autres pensent aussi, et c'est pourquoi ils ont développé le plugin Grids : Layout builder for WordPress. Le plugin est gratuit et fait exactement ce qu'il promet : il te permet de créer visuellement des grilles CSS sans l'ajout d'un constructeur de pages.

La particularité de la grille CSS est la possibilité de se chevaucher sans utiliser de marge négative ou de positionnement absolu. C'est exactement ce qui est possible avec le plugin. À l'aide de l'indice z et de la disposition dans la grille elle-même (le dernier élément est en haut, le premier en bas), il est possible d'afficher des hiérarchies.

L'exemple ci-dessus pourrait ressembler à ceci en tant que site web :

CSS Grid et @media query

La grille CSS peut bien sûr être utilisée librement avec Flexbox et Media Query. Cependant, il existe une autre nouvelle fonctionnalité apportée par CSS Grid : minmax()

Comme son nom l'indique, il s'agit des valeurs minimales et maximales. Tu peux l'utiliser en relation avec les colonnes. Contrairement à Media Query, ce n'est pas la taille de l'écran qui est interrogée ici, mais la taille de l'élément. Si la boîte se rétrécit au point de tomber en dessous de la taille minimale, les éléments s'agrandissent et se déplacent de manière à ce qu'elle rentre à nouveau.

Minmax() fonctionne en conjonction avec l'auto-fit et peut ressembler à ceci :

.grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Les colonnes créées ici ont une taille minimale de 240px, mais une taille maximale de 1fr. Dans cet exemple, 1fr correspond à la largeur totale de la grille. Cela permet de placer plusieurs éléments de la grille les uns à côté des autres s'il y a de la place, mais d'utiliser toute la largeur s'il n'y a pas assez d'espace.

Mais il y a aussi des avantages liés à Media Query. À l'aide des coordonnées, tu peux placer et disposer les éléments de ta grille différemment pour chaque appareil. En particulier sur les appareils mobiles, où la hiérarchie peut être différente de celle du bureau, cela peut t'offrir une expérience utilisateur agréable.

Toutes les caractéristiques spéciales en un coup d'œil

• FR (fraction) comme nouvelle unité CSS

• Les zones et les lignes de la grille peuvent recevoir des noms

• Grille-colonne, peut être utilisée avec "span n".

• Définir l'alignement de la grille sur "dense" pour remplir les espaces vides avec des éléments.

• Déclarer les mêmes colonnes ou rangées avec repeat()

• Affichage réactif à l'aide de minmax() + auto-fit/auto-fill

• Les éléments de la grille peuvent être disposés arbitrairement (et se chevaucher) dans la grille.

Voici d'autres sources d'information sur le sujet

• Un guide complet de CSS Grid par CSS Tricks
• Un guide d'apprentissage de CSS Grid par Learn CSS Grid
• Tout ce dont tu as besoin pour apprendre la grille CSS, de Grid by Example
• Teste tes compétences : disposition de la grille à partir de MDN Web Docs
• Apprends toutes les fonctions de CSS Grid de manière ludique avec CSS Grid Garden