Aller au contenu
Korben, roi d’internet, logo bébé avec des lunettes en mode thug life

Comment devenir un expert des grilles CSS ?

Pour les gens qui font de la CSS pour habiller leurs pages web et qui souffrent et qui saignent parce que parfois c’est un peu pris de tête, je vous propose qu’aujourd’hui on s’intéresse au concept de Grilles CSS.

Les grilles CSS (ou CSS Grid en anglais) permettent de créer des grilles divisant l’espace d’affichage en région. C’est un peu l’équivalent de nos bons vieux tableaux HTML sauf que c’est propre et ça permet de s’adapter à tout type d’écran (responsive). Ce n’est pas forcement simple à comprendre et à utiliser à moins de se former. Il y a d’ailleurs un coffret de 2 livres spécifiquement sur les Grid CSS et les Flexbox aux éditions ENI que je vous invite à lire si vous préférez vous former avec un livre.

Capture d'écran montrant une grille CSS en action

Ainsi avec des grilles CSS, on peut faire des colonnes, des lignes et s’arranger pour que chacune des « cases » (régions) de cette grille soit correctement positionnées ou les faire se chevaucher…etc.

Voici l’exemple qu’on peut trouver dans la doc Mozilla des specs CSS. D’abord au niveau code HTML, on fait des div comme d’habitude avec pour chacune des divs, la classe qui sera appelée pour lui donner un style.

<div class="wrapper">
  <div class="one">Un</div>
  <div class="two">Deux</div>
  <div class="three">Trois</div>
  <div class="four">Quatre</div>
  <div class="five">Cinq</div>
  <div class="six">Six</div>
</div>

Et pour la CSS :

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Le .wrapper c’est la classe qui englobe toute la grille. Ici on a donc 3 colonnes avec 10px d’écart entre celles-ci.

Et ensuite pour la démo, chaque classe indique l’emplacement des éléments sur la grille à l’aide des numéros de lignes horizontales et verticales.

Faut bien l’avouer, quand on débute en CSS, c’est pas très clair. Ça demande une petite gymnastique intellectuelle. Mais heureusement, il existe un super site qui va vous permettre de vous former aux Grid CSS.

Ça s’appelle Grid Garden et c’est un jeu pour apprendre à utiliser les grilles CSS en positionnant des éléments sur une grille, tout simplement à l’aide de propriété comme grid-column-start, grid-column-end, grid-rows, grid-template-columns et ce genre de choses.

Diagramme montrant les différentes propriétés de la grille CSS

Le projet est libre et vous pouvez trouver les sources ici. Dans le même esprit, il existe également FlexBox Froggy qui propose le même genre de jeu sauf que c’est pour apprendre à manipuler les éléments CSS pour les positionner correctement sur une page.

Puis sinon, y’a aussi Flexbox Defense qui pousse le concept de jeu encore un peu plus loin.

Et si vraiment les grilles CSS, ça vous sort par les yeux, Sylvain, lecteur de Korben.info, a développé un plugin post-CSS baptisé Grid Kiss qui permet de remplacer les 24 propriétés de la CSS Grids par du dessin ASCII avec des tirets et ce genre de chose.

Ainsi, si vous faites ceci dans votre code :

body {
	grid-kiss: "+-------------------------------+      "
		"|           header ↑            | 120px"
		"+-------------------------------+      "
		"                                       "
		"+-- 30% ---+  +--- auto --------+      "
		"| .sidebar |  |       main      | auto "
		"+----------+  +-----------------+      "
		"                                       "
		"+-------------------------------+      "
		"|              ↓                | 60px "
		"|         → footer ←            |      "
		"+-------------------------------+      ";
}

Et bien ça produira le code suivant :

body > header {
	grid-area: header;
	align-self: start;
}

body > .sidebar {
	grid-area: sidebar;
}

body > main {
	grid-area: main;
}

body > footer {
	grid-area: footer;
	justify-self: center;
	align-self: end;
}

body {
	display: grid;
	align-content: space-between;
	grid-template-rows: 120px 1fr 60px;
	grid-template-columns: 30% 1fr;
	grid-template-areas:
		"header  header"
		"sidebar main  "
		"footer  footer";
}

Sympa non ?

Pour vous exercer, il y a même un éditeur en ligne disponible ici. Bravo Sylvain, c’est trop cool comme projet !

Exemple de code CSS pour créer une grille personnalisée

Et voilà, maintenant vous n’aurez plus d’excuses pour abandonner définitivement l’usage des tableaux full HTML !


Les articles du moment