En mars, Mozilla a publié Firefox 52, qui a ajouté la prise en charge de la mise en page CSS Grid. Si vous n’êtes pas familier avec CSS Grid, c’est un système de mise en page bidimensionnel pour le web qui nous permet de créer des modèles de mise en page nativement dans le navigateur. Cela signifie que nous pouvons facilement recréer des grilles familières en utilisant seulement quelques lignes de CSS. Cela signifie également que nous pouvons faire tout un tas de choses avec CSS et les mises en page qui n’étaient pas possibles auparavant… mais nous en reparlerons dans un instant.
Une note rapide : ce post n’est pas destiné à être une introduction complète à CSS Grid, et suppose une familiarité de base avec CSS Grid. Si vous ne l’avez pas déjà fait, je vous recommande de consulter la fantastique page CSS Grid Layout sur MDN.
Les mises en page sur le web ont toujours été délicates. Lorsque le web a été introduit pour la première fois, il n’y avait aucune méthode pour les mises en page. Puis sont apparus les tableaux (dans les tableaux, dans les tableaux, dans les tableaux). C’était bricolé et bizarre, mais ça marchait. Lorsque CSS a été introduit à la fin des années 90, les développeurs ont pu commencer à utiliser des divs et des flottants pour leurs conceptions et leurs mises en page. Cette évolution a débouché sur des cadres et des systèmes de grille qui ont permis de donner un sens à toutes les difficultés rencontrées, comme la suppression des flottants, les marges négatives, la conception réactive, etc. Et c’est ainsi que les choses se passent depuis des années maintenant. Il existe des milliers de systèmes de grille, mais ils sont tous, plus ou moins, les mêmes.
Maintenant que CSS Grid Layout est une réalité, j’ai voulu voir ce qu’il faudrait pour remplacer un cadre de grille existant par CSS Grid. Pour cette expérience, j’ai choisi le populaire framework Bootstrap.
J’ai commencé par créer un site de base en utilisant la grille Bootstrap :
Visualisez-le sur CodePen.
Décomposons-le et convertissons-le pour utiliser CSS Grid.
Dans Bootstrap, la classe .container enveloppe tout et définit les contraintes de largeur. Elle ajoute également un padding aux bords gauche et droit et centre le tout. Il n’y a pas grand-chose à changer ici. Tout comme avec Bootstrap, la classe container peut être pratique à utiliser avec CSS Grid. Je l’ai recréé comme suit:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}Nous pouvons également ajouter des points d’arrêt réactifs en ajoutant ce qui suit:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap utilise la classe .row pour envelopper les colonnes et fournir une marge négative à gauche et à droite pour annuler le rembourrage ajouté par les colonnes individuelles. Les bidouillages comme les marges négatives ne sont plus nécessaires avec CSS Grid, mais si vous avez lu la documentation, vous savez que CSS Grid nécessite un conteneur de grille. La classe .row est l’endroit idéal pour le faire. Laissez-moi vous montrer ce que j’ai fait, puis nous allons le décomposer.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid crée le conteneur de la grille.
La propriété grid-template-columns définit les colonnes de la grille. Vous pouvez utiliser des espaces pour définir chaque colonne individuellement, mais ici nous utilisons la notation de répétition pour définir 12 colonnes de taille égale. La propriété 1fr fait référence à la largeur de la colonne individuelle. MDN définit l’unité fr comme une nouvelle unité qui « représente une fraction de l’espace disponible dans le conteneur de la grille ». Vous pouvez en savoir plus sur les unités fr sur MDN. Vous pouvez également en savoir plus sur la propriété grid-template-columns.
Enfin, la propriété grid-gap est une propriété raccourcie qui définit à la fois la quantité d’espace entre les colonnes et entre les rangées de colonnes. Considérez-la comme notre gouttière. Vous pouvez en savoir plus sur le grid-gap ici.
Maintenant, tout ce qui reste, ce sont les classes de colonnes. Bootstrap utilise des classes de colonnes telles que .col-md-6 ou .col-lg-8 pour déterminer le nombre de colonnes qu’une div doit couvrir. Il fait également flotter la div et ajoute du padding à gauche et à droite pour créer des gouttières entre les colonnes. Recréer ces classes est incroyablement facile grâce à la propriété abrégée .grid-column. Par exemple, si nous voulons recréer la classe .col-md-6, nous pouvons utiliser ce qui suit :
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Simple, non ? Pas de flotteurs. Pas de padding. Cela fonctionne tout simplement. Le raccourci grid-column spécifie la taille et l’emplacement d’un élément. Nous pouvons utiliser span pour indiquer que cet élément particulier doit couvrir six colonnes. La gouttière est automatiquement prise en charge grâce à la propriété grid-gap du wrapper. Vous pouvez en savoir plus sur la propriété grid-column ici.
Alors, que se passe-t-il lorsque vous mettez tout cela ensemble ? Eh bien, le site Web a exactement la même apparence, mais nous sommes en mesure de supprimer complètement la dépendance à Bootstrap et d’utiliser des grilles CSS natives.
Voyez le site Web mis à jour sur CodePen.
Ce type d’expérience est un exercice d’apprentissage amusant, mais il peut aussi être dangereux. Pour emprunter une ligne du sage philosophe Jeff Goldblum :
« Vous … étiez tellement préoccupé de savoir si vous pouviez ou non, que vous ne vous êtes pas arrêté pour penser si vous deviez. »
Nous ne voulons pas limiter CSS Grid en l’encastrant dans une syntaxe qui limitera son potentiel. Nous avons pu recréer facilement la grille Bootstrap, mais CSS Grid est tellement plus puissant que tous les systèmes de grille qui l’ont précédé. C’est parce qu’il s’agit d’une solution native du web construite à partir de la base.
Nous ne sommes plus enfermés dans des grilles à 12 colonnes qui flottent de gauche à droite. Vous voulez placer des éléments à des emplacements précis sur la grille, indépendamment de l’ordre de leur source HTML ? C’est possible. Voulez-vous créer des éléments qui s’étendent sur plusieurs colonnes et lignes ? Aucun problème. Jetez un coup d’œil à cette démo que Craig Cook, de Mozilla, a créée pour présenter différents modèles de mise en page. Essayez de recréer certaines de ces mises en page à l’aide de Bootstrap (indice : impossible). Nous ne faisons que gratter la surface de ce que les grilles CSS peuvent faire.