Publié le 17 août 2017
  • Avancé
  • CSS
  • Développement
  • Intégration

Comment créer une grille CSS en toute simplicité ?

Intéressant cet article ?

[Total : 0    Moyenne : 0/5]

La grille, un nouveau système pour organiser la mise en page en CSS, sans avoir à gérer des float, des clear, des nth child, et autres joyeusetés. En m’intéressant de plus près à cette fameuse grille, j’espérais éventuellement être désintégrée pour parvenir dans un monde de pixels et de petites motos parcourant des lignes (vous avez la ref ? Tron), mais à la place, j’y ai trouvé une révolution pour ma mise en page. Partons donc à la découverte de cette nouvelle propriété : le grid layout.

Sans la grille : complexe et long

La grille s’utilise à travers la propriété « display : grid ». Celle-ci permet, à l’aide de quelques propriétés supplémentaires, d’organiser sa mise en page très facilement, à l’aide de colonnes et de lignes. Cela peut être quelque chose de très ordonné, ou bien de tout à fait chaotique, la grid peut tout gérer. Par exemple, si vous souhaitez faire quelque chose de très ordonné, mettons… une liste de produits qui devraient s’afficher sur 5 colonnes de taille identiques et 2 lignes de hauteur 100px.

En temps normal, vous devriez créer vos éléments, leur mettre un float left, puis clear ce float tous les 5 éléments, MAIS il vous faudrait une autre version pour mobile, du coup il faudrait enlever le clear fait sur le précédent breakpoint, pour en ajouter un autre à un autre endroit… Bref, complexe !

Avec la grille, 1 tableau de 5 par 2 en 10 secondes

Avec la grille, on va indiquer au conteneur (ici notre classe .grid) qui contiendra toutes cette jolie liste de produit les propriétés suivantes :

See the Pen Cécile_00 by JETPULP (@jetpulp) on CodePen.0

Et BIM ! Une grille de 5 colonnes par 2 lignes sans position absolute, sans float left, sans éléments qui sortent du flux, et surtout : en 10 secondes. On va détailler tout ça un peu plus (oui, notamment la valeur « fr » ^^) N’hésitez pas à modifier les codepen en direct pour voir ce qu’il se passe, c’est fait pour ça !

La base : le grid-template-columns et le grid-template-row :

Ils fonctionnent l’un et l’autre de la même manière. Vous pouvez, comme l’exemple ci-dessus, définir une largeur fixe pour chacune de vos colonnes/lignes, avec le repeat, dans lequel vous définissez le nombre de colonnes souhaitées, et la taille de celles-ci. Mais vous pouvez également définir des largeurs différentes ! Par exemple, si la première colonne doit faire 100px, mais la seconde plutôt 200px, et les 3 suivantes doivent occuper l’espace restant de manière égale :

See the Pen Cécile_01 by JETPULP (@jetpulp) on CodePen.0

Si vous me suivez, ça veut aussi dire que oui, à la place du repeat, vous pouvez mélanger les tailles en pixel en toute autre mesure. D’aucuns appelleraient ça la liberté (c’est beau !). Pour faire un petit point sur le responsive, rien de plus simple, il vous suffit de préciser votre nouveau schéma avec votre nouveau nombre de colonnes dans votre media query, et le tour est joué. :)

Une mise en page moins carrée

Admettons qu’au contraire, vous soyez d’humeur moins ordonnée, et que vous ayez envie de faire quelque chose de pas vraiment « dans les cases ». Ce qu’il vous faut, c’est le grid-template. Ici, on va plutôt partir sur le principe de header, article, footer, etc, parce que pour l’exemple, c’est plus simple et plus parlant. Typiquement, Vous ne voudriez pas que tous vos éléments fassent la même taille, rangés les uns à côtés des autres, ce serait sûrement bizarre (oui bon, moche, ok). Alors vous allez définir une zone de template, et ensuite, vous allez répartir vos zones de template en fonction de là où vous voulez aller.

Une zone peut donc s’étaler sur plusieurs lignes, ou colonnes, ce qui est par exemple le cas dans l’exemple ci-dessous :

See the Pen Cécile_02 by JETPULP (@jetpulp) on CodePen.0

Il faut considérer le grid-template comme un schéma qui représenterait les zones que l’on veut dessiner.

Les valeurs :

On peut tout à fait utiliser des valeurs génériques, comme les pourcentages, les pixels, les points, mais aussi les fr. Le fr fait référence à fraction. A partir de là, il est aisé de deviner l’effet de cette unité de valeur.

Par exemple, pour deux colonnes dont la première prend deux fois plus de place que la seconde :

grid-template-column  : 2fr, 1fr

C’est ce même principe que l’on a appliqué au premier exemple, où chaque colonne prend une part proportionnellement égale.

La compatibilité

Cependant, il faut être attentif quant à la compatibilité de la propriété, qui reste relativement récente, et non supportée par les navigateurs non mis à jour. Elle est aujourd’hui prise en compte par les principaux navigateurs, Chrome, Firefox, et Safari.

C’est ainsi que ce premier tour d’introduction à la propriété display grid se termine. J’espère qu’il vous a rendu curieux et que vous utiliserez vous aussi ce fonctionnement pour gagner beaucoup de temps. Et comme les possibilités de la grille sont très étendues, je vous donne rendez-vous dans un prochain épisode pour en explorer encore plus !

Cécile A.

La-qualité-une-responsabilité-collective
Qu'est-ce-qu-un-CDN_blog-JETPULP
ShadowIT
ShadowIT
security-265130_960_720
ShadowIT
0 Commentaires
Répondre
Se joindre à la discussion ?
Vous êtes libre de contribuer !
Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *