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.

Par

Une pluie d'étoiles est tombée sur la tête des développeurs web cette semaine avec l'arrivée officielle de CSS Grid sur les dernières versions de Firefox et Chrome. C'est fait, nous pouvons maintenant 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 maintenable.

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 :

<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 :

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 :

//CSS
.wrapper {
  display: grid;
}

Ce qui nous amène à ceci :

See the Pen Type Specimen Grid Demo – 1 by Robin Rendle (@robinrendle) on CodePen.

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 :

//CSS
.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 :

See the Pen Type Specimen Grid Demo – 2 by Robin Rendle (@robinrendle) on CodePen.

Hourra ! ça marche. Mais vous avez vu cet écart bizarre entre les deux colonnes ? C'est le background 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 markup ? Quelle conséquence sur notre mise en page ?

//HTML
<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 divvont se placer directement en-dessous des autres et feront exactement 1fr de large.

See the Pen Type Specimen Grid Demo – 3 by Robin Rendle (@robinrendle) on CodePen.

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 :

//CSS
.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 :

See the Pen Type Specimen Grid Demo – 4 by Robin Rendle (@robinrendle) on CodePen.

Nous avons réalisé notre première grille. Nous avons créé rangée et colonne 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 ?

//CSS
.wrapper {
 grid-template-columns: 1fr 1fr 1fr;
}

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

See the Pen Type Specimen Grid Demo – 5 by Robin Rendle (@robinrendle) on CodePen.

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.

//CSS
.wrapper {
 grid-template-columns: 3fr 1fr 1fr;
}

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

See the Pen Type Specimen Grid Demo – 6 by Robin Rendle (@robinrendle) on CodePen.

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 2 colonnes, puis à 500px passer à 3 colonnes et finalement sur les écrans larges passer à 4 colonnes. Il suffit d'écrire :

//CSS
.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 !

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 :

//CSS
.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
}

Nous réglons ici la hauteur des rangées, et leur relation. 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 3 fois la hauteur de la première.

See the Pen Type Specimen Grid Demo – 8 by Robin Rendle (@robinrendle) on CodePen.

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'oeil 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 oeil 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.

Compatibilité navigateurs

La compatibilité actuelle est consultable sur Can I Use.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS Grid parus dans la Cascade ainsi que les ressources CSS Grid.

Tous les articles sur Flexbox parus dans la Cascade ainsi que les ressources Flexbox.


original paru le 13 mars 2017 dans CSS Tricks
Traduit avec l’aimable autorisation de CSS Tricks et de l’auteur.
Copyright CSS Tricks © 2017
.

Sur l’auteur : est auteur d'articles techniques et blogger. Il a écrit de nombreux articles pour CSS Tricks. On peut le suivre sur Twitter.