Se lancer dans CSS Grid

Robin Rendle a écrit un tutoriel simple pour s'initier à CSS Grid en commençant par les bases. Une excellente introduction au système de layout qui va nous changer la vie.

1 commentaire Donner une note  l'article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. On commence !

Une pluie d'étoiles est tombée sur la tête des développeurs web avec l'arrivée officielle de CSS Grid sur les dernières versions de Firefox et Chrome. C'est fait, nous pouvons utiliser Grid dans deux navigateurs populaires.

Mais pourquoi est-ce si important et pourquoi devrions-nous nous y intéresser ?

Tout simplement parce que CSS Grid est le premier véritable système de layout pour le web. Il est conçu pour permettre l'organisation du contenu en colonnes et en rangées et il donne aux développeurs le contrôle des écrans. Nous pouvons enfin jeter aux orties des années de solutions de contournement et autres bidouillages, car il est maintenant possible d'organiser des pages complexes de façon simple et avec une maintenance aisée.

OK, mais comment fonctionne CSS Grid ? Il existe tout un tas de tutoriels complexes et détaillés, mais je vous propose de commencer par les bases. Ce que nous allons réaliser ici c'est une simple page présentant une collection de polices de caractères.

Pour commencer, notre HTML :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
</div>

Nous donnons d'abord à nos lettres les bonnes font-size et color, puis nous les centrons dans nos div avec les propriétés Flexbox align-items et justify-content. Car, au passage, CSS Grid ne remplace pas les propriétés Flexbox, au contraire les deux se complètent parfaitement. Revenons à notre démo :

Image non disponible

Dans cet exemple, nous avons deux div empilées, puisque leur affichage par défaut est display: block. Maintenant, nous allons indiquer à l'élément parent d'utiliser Grid :

 
Sélectionnez
1.
2.
3.
.wrapper {
  display: grid;
}

Ce qui nous amène à ceci :

Comme vous le remarquez, rien ne s'est passé… En fait, pour que nos grilles (grid) entrent en action, nous devons leur donner des colonnes ou des rangées. Dans mon exemple, je vais simplement aligner les deux lettres l'une à côté de l'autre dans deux colonnes :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1px;
  background-color: black;
}

Ce que nous avons fait : d'abord nous avons créé deux colonnes dans notre grille avec grid-template-columns. La valeur 1fr peut paraître super bizarre mais c'est une unité CSS qui indique que chaque colonne doit représenter une fraction de notre grille. Dans notre exemple, ça signifie qu'on aura deux colonnes de largeur égale.

Et voici le résultat :

Hourra ! ça marche. Mais vous avez vu cet écart surprenant entre les deux colonnes ? C'est l’arrière-plan du wrapper qui pointe son nez entre chaque div letter parce que nous avons réglé la propriété grid-column-gap sur 1px. En général, on souhaitera une gouttière plus large, surtout si on aligne des blocs de texte, mais pour nous 1px sera suffisant.

Et maintenant, que se passe-t-il si nous ajoutons deux nouvelles lettres dans notre balisage? Quelle conséquence sur notre mise en page ?

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
  <div class='letter'>
    C
  </div>
  <div class='letter'>
    D
  </div>
</div>

Eh bien, techniquement, ça ne change rien à notre grille. Nous avons dit qu'elle devait avoir deux colonnes, donc les nouvelles div vont se placer directement en-dessous des autres et feront exactement 1fr de large.

Mais il y a quelque chose d'étrange : pourquoi n'y a-t-il pas de gouttière entre les lettres A et C et entre B et D ? Parce que grid-column-gap est fait pour les colonnes, or l'ajout des div a créé une nouvelle rangée. Nous devons donc utiliser la propriété équivalente, grid-row-gap, pour voir notre changement prendre effet :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
.wrapper {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* les autres styles suivent ici */
  /* on aurait pu utiliser le raccourci `grid-gap` */
}

Le résultat :

Nous avons réalisé notre première grille. Nous avons créé rangées et colonnes simplement en modifiant notre balisage. Mais explorons un peu plus nos colonnes. Que se passerait-il si nous ajoutions une autre valeur à la propriété grid-template-columns ?

 
Sélectionnez
1.
2.
3.
.wrapper {
 grid-template-columns: 1fr 1fr 1fr;
}

Eh bien tout simplement nous aurions une colonne supplémentaire ! Remarquez qu'on voit maintenant l’arrière-plan du wrapper car il n'y a pas d'enfants pour remplir l'espace.

Et si nous modifions la valeur d'un fr dans cette propriété, nous obtiendrions ce qu'on appelle une grille asymétrique. Disons par exemple que nous voulons avoir une première colonne occupant trois fois autant d'espace que chacune des autres.

 
Sélectionnez
1.
2.
3.
.wrapper {
 grid-template-columns: 3fr 1fr 1fr;
}

Cela nous donne, comme souhaité, une première colonne bien plus large que les deux suivantes :

Formidable non ? Plus besoin de se soucier de marges négatives ou de pourcentages parfaits pour aligner correctement les choses. Nous pouvons réaliser des grilles très complexes sans recourir aux calculs mathématiques du passé. Il nous suffit maintenant d'ajouter une nouvelle valeur à la propriété grid-template-columns et hop, une nouvelle colonne apparaît comme par magie !

Quid des grilles responsives me direz-vous ? C'est simplissime, il suffit de modifier la propriété dans une media query. Admettons que nous voulions avoir une grille par défaut de deux colonnes, puis à 500px passer à trois colonnes et finalement sur les écrans larges passer à quatre colonnes. Il suffit d'écrire :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  @media screen and (min-width: 500px) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  @media screen and (min-width: 800px) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Ouvrez cette démo et modifiez la largeur du viewport pour voir la magie responsive !

Image non disponible

La propriété grid-template-columns est plus complexe que ce que j'ai montré ici, mais c'est un bon point de départ. Intéressons-nous maintenant à la propriété qui va nous changer la vie, grid-template-rows.

Et pour cela, partons à la découverte. Avec ce que nous savons déjà de Grid, essayons d'imaginer ce que cette propriété peut bien faire :

 
Sélectionnez
1.
2.
3.
4.
5.
.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
}

Nous réglons ici la hauteur des rangées et leurs relations. Donc, si nous avons deux rangées, comme dans notre démo précédente et que la dernière unité de grid-template-columns est réglée sur 3fr, ça signifie que la deuxième rangée fera toujours trois fois la hauteur de la première.

Cela a l'air simple, mais jusqu'à présent c'était compliqué. Il fallait utiliser des min-height sur un élément spécifique ou modifier le nom de la classe. Mais nous n'avons jamais créé des relations entre rangées comme cela. C'est ce qui donne sa puissance à CSS Grid.

Avec ces quelques notions et une poignée de nouvelles propriétés, nous sommes en mesure de réaliser des layouts incroyablement complexes — les grilles asymétriques et responsives n'en étant qu'une toute petite partie (NdT : voir le lab de Jen Simmons.). Nous n'avons fait que jeter un coup d'œil dans la spec de CSS Grid et il y a encore bien d'autres choses à découvrir. Mais je crois que Jen Simmons a donné la meilleure description lorsqu'elle a écrit :

« Nous devons explorer CSS Grid si nous voulons comprendre ce qu'il veut faire, ce qu'il peut être obligé de faire et ce qu'il refuse de faire. De nombreux designers n'ont peut-être pas envie d'apprendre CSS, pourtant il vous faut comprendre suffisamment CSS pour comprendre notre medium artistique. »

Et c'est vrai, ce code peut paraître étrange à première vue. Mais la conséquence est que nous n'avons plus besoin de recourir à des frameworks CSS géants et la plupart des bidouillages sont maintenant inutiles. Mais ce que je trouve le plus excitant, c'est qu'il nous oblige à voir d'un œil neuf l'espace du navigateur.

Nous allons apprendre quelques nouvelles propriétés, mais surtout nous allons repenser ce que nous avons appris : CSS Grid n'est pas seulement une spec, c'est une philosophie en soi.

II. Compatibilité navigateurs

La compatibilité actuelle est consultable sur Can I Use.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2019 Robin Rendle. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.