French (Français) translation by Henri Lotin (you can also view the original English article)
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 :
- Grid acceptera des unités flexibles en combinaison avec des unités de mesure fixes.
- Nous ne devons pas déclarer les gouttières dans notre
grid-template
, nous pouvons utiliser les propriétés degrid-gap
à la place. -
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. - La fonction
repeat()
nous fera gagner du temps et garder nos feuilles de style maintenables. - 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
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post