Dans ce tutoriel, nous allons prendre la grille de notre tutoriel précédent et l'utiliser comme une aire de jeux pour approfondir Grid. Nous allons améliorer la façon dont nous définissons nos gouttières, explorer les mise en pages fluides, l’unité fr et introduire la fonction repeat().

Unités flexibles

Le point entier de Grid est de nous permettre de contrôler correctement la mise en pages sur le web, nous allons donc rendre notre grille statique fluide avant d’aller plus loin. Si vous vous souvenez, nous avons définit notre grille avec des mesures statiques en pixel :

grid-template-columns: 150px 20px 150px 20px 150px;
grid-template-rows: auto 20px auto 20px auto;

Il est tout à fait possible d’utiliser d'autres unités ici également, comme ems ou rems par exemple. Ou même des unités encore plus insolites comme vh et vmin.

Dans ce cas, nous allons changer nos unités de pixel pour des pourcentages. Comme nous allons définir nos largeurs de colonne et nos largeurs de gouttière manuellement, il faut s’assurer que le total des valeurs est égal à 100% :

grid-template-columns: 30% 5% 30% 5% 30%;

Tenez compte de l'écart

Il existe un moyen plus récent et plus efficace pour déclarer les dimensions de la gouttière, et c’est avec une propriété dédiée. Nous pouvons utiliser grid-column-gap et grid-row-gap ou la propriété grid-gap à la place.

Grâce à ce moyen, nous n’avons plus besoin d’inclure des espaces de grille pour accueillir nos gouttières, il suffit de déclarer les colonnes et lignes, donc dans notre cas, cela signifie trois de chaque :

  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: auto auto auto;

Hmm, c’est un peu brouillon, mais ça fait le travail. La différence que vous remarquerez est que les largeurs de colonne vont maintenant jusqu'à 100% ; nos gouttières en seront effectivement soustraites automatiquement.

Repeat

Nous allons écrire cela d’une manière plus ordonnée, à l’aide de la fonction repeat() :

grid-template-columns: repeat(3, 33.33%);

Celle-ci déclare qu'il faut « répéter 33,33% trois fois » nous donnant trois colonnes. Et nous n'avons même pas besoin de la déclaration de grid-template-rows car la valeur auto est affectée comme valeur par défaut de toute façon. Maintenant nous devons juste déclarer comment nous voulons nos gouttières :

  grid-template-columns: repeat(3, 33.33%);
  grid-gap: 20px;

grid-gap acceptera des unités fixes ou flexibles, ce qui signifie que nous pouvons parfaitement combiner des colonnes fluides et des gouttières fixes sans calculs complexes de notre part.

Redéfinition de nos valeurs grid-column et grid-row

Quelque chose ne va pas : nous avons encore une charge de déclarations grid-column et grid-row sur nos éléments de grille, mais ils ont tout faux car nous n’avons plus autant d'écart de grille. Heureusement, parce que nous utilisons grid-gap pour définir nos gouttières, nous pouvons laisser le positionnement des éléments à placement-items automatique qui ne tombera pas dans les gouttières. Pour l’instant, retirez tout le positionnement :

L’unité fr

Une amélioration finale peut être apportée à notre grille simple ; Nous allons introduire le fr ou unité de fraction. Une seule unité fr décrit « une pièce cependant de nombreuses pièces en lesquelles nous la fractionnons ». Par exemple, nous pourrions déclarer nos colonnes à l’aide de :

  grid-template-columns: 1fr 1fr 1fr;

Ici il y a un total de trois unités fr, chaque colonne serait donc un large d'un tiers. Voici un autre exemple :

  grid-template-columns: 2fr 1fr 1fr

Maintenant, il y a un total de quatre unités fr, donc la première colonne prendrait en charge la moitié de la largeur disponible, avec les deux autres colonnes prenant chacune un quart.

Ces unités sont vraiment très puissantes, surtout en combinaison avec d’autres unités de mesure :

grid-template-columns: 300px 1fr 3fr 20%;

Ici, nous avons déclaré quatre colonnes :

• la première est fixée à 300px de large
• la dernière est un conteneur flexible de 20% de large de l’élément de grid
• puis les unités fr sont calculées, laissant la deuxième colonne avec un morceau de l’espace restant
• et la troisième place avec trois morceaux.

Ça ressemble à ceci, soulignant parfaitement l'auto-placement comme nos neuf éléments comblent les vides :

Mais revenons à notre grille originale. Remplaçons la valeur de 33,33 % maladroite et imprécise avec 1fr :

  grid-template-columns: repeat(3, 1fr);

Pen terminé :

Conclusion

Donc, pour récapituler :

1. Grid acceptera des unités flexibles en combinaison avec des unités de mesure fixes.
2. Nous ne devons pas déclarer les gouttières dans notre grid-template, nous pouvons utiliser les propriétés de grid-gap à la place.
3. grid-gap signifie que nous sommes moins liés au positionnement de nos éléments de grille – nous pouvons confier davantage de responsabilités à auto-placement.
4. La fonction repeat() nous fera gagner du temps et garder nos feuilles de style maintenables.
5. L'unité fr ou fraction est un moyen très puissant de décrire des templates de grille.

Nous avons parcouru un long chemin en juste deux tutoriels, mais vous êtes maintenant l’heureux propriétaire d’une grille très soignée et concise ! Dans le prochain tutoriel, nous allons explorer les zones de grille, jeter un regard sur le mot-clé span et certaines mises en pages pratiques.

Ressources utiles

• La police <fraction> et l'unité fr sur W3C
• Une fois de plus, suivez @rachelandrew