Cette fois-ci, c’est le trésorier de l’association WPParis, l’excellent Grégoire Noyelle, qui nous fait découvrir Grid Layout CSS. En français, il s’agit des propriétés des feuilles de style en cascade (css) qui permettent des maquettes (layout) de type grille (grid).
En bref c’est quoi les CSS Grid Layout ?
Des propriétés supportées à ce jour par 70 % des navigateurs desktop et 100% des navigateurs iOS et Android.
Une méthode économe en code pour des maquettes en responsive design.
Aller plus loin que Flex et enterrer la technique fastidieuse des « Float ».
Traditionnellement on utilise le float, initialement pour l’habillage autour des images, pour construire une mise en page telle une grille d’articles. C’est assez complexe, il faut penser aux nth of type, calculer les gouttières, faire des « clear »… Puis vint le Flex. C’est déjà beaucoup mieux mais le Flex ne connaît que l’horizontale ou la verticale, pas les deux en même temps. Avec Grid on va beaucoup plus loin puisqu’on peut facilement décider de la taille et de la position de toute cellule dans une grille. Pour le responsive, il n’y a que quelques valeur à changer dans nos media queries pour tout repositionner comme on veut, un peu comme le jeu du taquin.
Et comment fait-on une belle grille en feuille de style ?
Prenez un élément HTML contenant, une <div> ou une <section>, attribuez lui une classe. Dans votre feuille de style vous attribuerez à cette classe la propriété {display: grid;} et tous les éléments enfants se placeront selon votre grille. Ajoutez des indications pour les colonnes comme {grid-template-columns: 100px 100px 100px;} les gouttières {grid-gap: 10px;} et les lignes {grid-template-rows: auto 10px auto;}.
Donc je peux commencer une grille avec par exemple :
.contenant {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: auto 10px auto;
grid-gap: 1rem;
}
- On peut utiliser et mixer les px, les em, les fr (fraction en fonction de l’espace disponible), les rem.
- On peut raccourcir : {grid-template-columns: 100px 100px 100px;} devient {grid-template-columns: repeat(3, 100px);}.
- On peut affiner en utilisant les propriétés min et max.
Vous avez joué à la bataille navale ? Vous savez coder en grid !
Pour positionner précisément vos éléments, vous utiliserez les numéros de ligne.
Entre chaque colonne et entre chaque rangée il y a des lignes. On commence avant la première colonne/rangée et on finit après la dernière colonne/rangée. Donc, dans une grille avec 5 colonnes et 4 rangées il y a 6 lignes verticales et 5 lignes horizontales. Elles vont servir pour indiquer les coordonnées de positionnement de votre élément.
Soit la cellule enfant de classe .enfant si je dis :
.cellule {
grid-column : 2/5;
grid-row : 2/4;
}
J’aurai ceci :
That’s it ! Je trouve que c’est plutôt cool.
Présentation PDF
Je vous laisse découvrir les nombreuses autres possibilités d’organisation de maquettes de type grille avec les CSS Grid layout
dans la magnifique présentation PDF dessinée que Grégoire à préparé pour nous (ça change des moches PowerPoint !).
En prime le dépôt github de la conférence avec les ressources.
Grid sur la toile
Voici quelques sites recommandés par Grégoire :
- http://jensimmons.com/
- http://thewebahead.net/
- https://rachelandrew.co.uk/
- https://gridbyexample.com/
Faites de beaux sites et envoyez-nous vos grilles !
Merci d’être arrivés jusqu’ici 😉