Skip to content
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.

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.

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 !

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

Avec Fiverr, trouvez le freelance qui vous convient

Comme beaucoup je pense qu’au départ Fiverr a eu un peu l’image de la ferme à graphisme low cost, tous les services étant proposés à bas prix. Mais le marketplace a su se réinventer et propose désormais à des freelances aux talents multiples de s’exprimer selon une palette tarifaire beaucoup plus large (cela va de quelques euros à plusieurs milliers), que ce soit à la mission unique ou via une souscription régulière. La société est aussi entrée en bourse, a racheté plusieurs autres compagnies et a retravaillé son positionnement et son image auprès du public.

Quel que soit votre choix, lorsque vous trouvez une personne qui correspond bien à votre recherche, que vous aimez son travail et son état d’esprit, vous pouvez rester en contact pour qu’elle vous accompagne sur le (très) long terme. Et ça c’est plutôt appréciable lorsqu’on connait la difficulté de trouver la bonne personne avec qui bosser.

Hop découvrez Fiverr


Les articles du moment