Le grand Eric Meyer s'amuse avec CSS Grid : il décide de convertir son site personnel, qui doit rester compatible avec les anciens navigateurs, et nous montre la transformation en détail.

Par

CSS Grid est bien plus facile à comprendre et à utiliser qu'on ne pourrait le penser. Lorsque Grid a été officiellement supporté par Firefox (52), j'ai décidé sur le champ de convertir la mise en page de mon site personnel. Et ça a été très simple : 5 minutes pour écrire les styles grid et 15-20 minutes pour résoudre les problèmes résiduels.

CSS Grid nous permet de définir des colonnes et des rangées, puis d'y attacher des éléments dans l'ordre que nous voulons. Cela vous fait peut-être penser aux tables, mais Grid est infiniment plus que ce que les tables ont jamais rêvé de faire. Il rend possible des layouts plus responsifs, des documents bien plus accessibles, et un markup plus propre qu'avec les floats et le positionnement habituels.

Depuis des années que le CSS existe, jamais il n'a proposé un pareil système. Et Grid est déjà supporté dans Firefox et Chrome, Opera et Safari. Nous sommes à l'aube d'une nouvelle ère du design numérique.

Comment c'était avant ?

Avant de parler de Grid, permettez-moi de présenter la structure des pages principales de meyerweb et l'approche positionnement-marges utilisée depuis hmmm... à peu près 12 ans maintenant. Voici comment le markup est structuré :
//HTML
<body>
   <div id="sitemast">…</div>
   <div id="search">…</div>
   <div id="main">…</div>
   <div id="extra">…</div>
   <div id="navigate">…</div>
   <div id="footer">…</div>
</body>

Certains ID sont des vestiges de ma vision du layout et des conventions de nommage des années 2000. #extra par exemple est ce que nous appellerions #sidebar, #sitemast serait aujourd'hui #masthead et #footer date d'avant l'actuel élément <footer>.

Les divs (qui devraient sans doute être des sections aujourd'hui, mais ok) sont organisées de façon à ce que si le CSS n'est pas chargé correctement , ou si un lecteur d’écran est utilisé pour naviguer sur le site, alors le masthead vient en premier, puis la possibilité de recherche, puis le contenu principal. Après quoi viennent la navigation et le footer.

Tout ceci a été assemblé en positionnant absolument les divs de navigation et de recherche. La hauteur du sitemast (le header) est de 192px, et les divs de navigation et de recherche sont fixées à top: 192px; pour apparaître juste en-dessous. Afin de leur laisser un peu d'espace, des marges supérieures (margin-top) ont été appliquées aux divs main et extra. (Fig. 1)

Fig. 1 : La page d'accueil de meyerweb (raccourcie)

Construction de la grille

Voilà comment les choses ont été organisées vers 2005. À un certain moment, j'ai fait une expérience avec Flexbox mais elle n'a jamais été publiée, l'utilisation d'un outil de mise en page unidimensionnelle pour gérer un layout en deux dimensions ne me paraissait pas appropriée. J'aurais sans doute dû convertir la barre de navigation en flexbox, mais j'en ai été détourné par autre chose et je n'y suis jamais revenu.

De plus, Grid était en chemin. Dans la période précédant sa sortie, je me suis concentré sur l'apprentissage et l'enseignement de Grid, j'ai créé des scénarios de tests et je l'ai utilisé pour des publications à venir. Et puis, le 7 mars 2017, il a été officiellement lancé avec Firefox 52. J'ai tweeté et publié un article et une démo que j'avais confectionnée la nuit précédente, et je me suis émerveillé de la journée qui venait de se passer. Après plus de 20 ans de CSS, enfin, un vrai système de mise en page, un ensemble de propriétés et de valeurs conçues depuis le départ à cette fin.

J'ai décidé à ce moment de convertir mon site personnel et d'utiliser Grid pour la mise en page de son niveau main. Il m'a fallu moins de cinq minutes pour produire le CSS suivant :

//CSS
body {
   display: grid;
   grid-template-rows: 192px min-content min-content 1fr;
   grid-template-columns: 1fr 20em;
}

#sitemast {
   grid-row: 1; 
   grid-column: 1 / span 2;
}

#search {
   grid-row: 2; 
   grid-column: 2;
}

#main {
   grid-row: 3; 
   grid-column: 1;
}

#extra  {
   grid-row: 3; 
   grid-column: 2;
}

#navigate {
   grid-row: 2; 
   grid-column: 1;
}

#footer {
   grid-row: 4; 
   grid-column: 1;
}

Ce n'est pas tout ce qu'il y avait à faire, mais c'est le coeur même. Entrons maintenant dans le détail.

body {
   display: grid;
   grid-template-rows: 192px min-content min-content 1fr;
   grid-template-columns: 1fr 20em;
}

Dans cette partie de CSS, je fais du body un container grid. Du coup, tous ses enfants deviennent des items grid. Si vous avez déjà travaillé avec Flexbox, c'est une notion qui vous est familière. Bref, avec ce display: grid, j'ai transformé toutes les divs enfant en items grid.

Intéressons-nous maintenant aux rangées.Les valeurs de grid-template-rows définissent les distances de séparation entre les lignes de grille — même chose d'ailleurs pour grid-template-columns comme nous le verrons tout à l'heure.
( NdT : Pour bien suivre cette explication, il peut être utile de se reporter au guide complet de CSS Grid Layout, traduit ici, notamment concernant les concepts fondamentaux de ligne, cellule, plage, zone, colonne et rangée).

Donc, la valeur 192px min-content min-content 1fr; signifie : "descendre de 192px à partir du sommet du container et déposer une ligne de grille. Puis en déposer deux autres qui laisseront suffisamment d'espace vertical pour le contenu des rangées qu'elles définissent. Enfin, laisser une fr (fraction) de distance entre la troisième ligne et le bas du container". (Fig. 2)

Fig. 2 : Définition des rangées

La valeur min-content est cool. Elle fait exactement ce qu'elle dit : "prendre la quantité d'espace minimum permettant d'insérer le contenu". Par exemple la deuxième rangée, celle qui va contenir la barre de navigation et le champ de recherche, sera aussi haute que le plus grand des deux (en l'occurrence le champ de recherche) et rien de plus.

Idem pour la troisième rangée, contenant les divs main et extra. Sur la page d'accueil, la div main sera plus haute. Sur les autres pages, le contenu pourra être moins important. Dans tous les cas, la rangée contenant ces deux div s'adaptera.

Maintenant que nous avons les rangées, passons aux colonnes. J'ai décidé de faire simple et de n'en garder que deux. Si vous regardez la page d'accueil de meyerweb, on a l'impression qu'il y en a trois mais ce n'est vrai que des articles de blog — une part substantielle mais minoritaire du site — et la "colonne" de gauche est plutôt une sidebar à l'intérieur de la colonne principale.

Dans le design d'origine, la sidebar (#extra) à droite fait 18em de large, avec un peu d'espace autour pour la séparer de la colonne principale. Mais la colonne doit également intégrer le champ de recherche qui est un peu plus large. Après quelques expériences, je me suis arrêté à 20em. Le reste est flexible avec 1fr. (Fig. 3)

Fig. 3 : Définition des colonnes

Quelques mots d'explication sur fr que j'ai utilisé deux fois : fr est le diminutif de "fraction" et signifie "une fraction de l'espace disponible non contraint". Dans cette grille, nous avons deux colonnes. L'une a une largeur explicite de 20em, qui est donc contrainte — il n'y a pas de flexibilité possible. Le reste de l'espace des colonnes est non contraint — lorsque la largeur du container change (par exemple en raison d'un redimensionnement de la fenêtre du navigateur), l'espace non contraint sera modifié, il sera égal à la largeur du container moins les 20em d'espace contraint.

Imaginons pour un instant que j'aie décidé de partager la grille en quatre colonnes, celle de droite faisant 20em de large et les autres étant de largeur égale et flexible. On aurait quelque chose comme :

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

J'aurais aussi pu écrire :

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

Dans tous les cas, cela aurait entraîné la division de l'espace non contraint en trois parties égales pour les trois premières colonnes. Si le container grid faisait 65em de large, la dernière colonne ferait 20em et les trois autres 15em chacune (3 × 15 = 45 et 45 + 20 = 65). Si je réduis la largeur du container à 50em, les trois premières colonnes feront chacune 10em de large.

Dans mon cas, je voulais que la première colonne prenne tout l'espace non réservé à la dernière colonne, contrainte, donc elle a pris la valeur 1fr. Le résultat final est le suivant. (Fig. 4)

Fig. 4 : la grille complète

Placer les items

Les lignes étant définies, il ne nous reste plus qu'à placer les items. On peut le faire automatiquement, en utilisant l'algorithme grid-flow, mais j'avais envie de placer chaque item à un endroit spécifique. Ce qui m'a amené à ceci :

#sitemast {
   grid-row: 1; 
   grid-column: 1 / span 2;
}

#search {
   grid-row: 2; 
   grid-column: 2;
}

#main {
   grid-row: 3; 
   grid-column: 1;
}

#extra {
   grid-row: 3; 
   grid-column: 2;
}

#navigate {
   grid-row: 2; 
   grid-column: 1;
}

#footer {
   grid-row: 4; 
   grid-column: 1;
}

Pour chacune des six divs je dis simplement "accrocher le bord supérieur à la ligne de rangée et le bord gauche à la ligne de colonne". J'utilise les numéros de ligne mais j'aurais pu leur attribuer un nom (on verra cela tout à l'heure).

Pour prendre un exemple, j'ai configuré la partie #main ainsi : commencer à la troisième ligne de rangée et à la première ligne de colonne. Par défaut, elle remplira donc l'espace allant de la première à la deuxième ligne de colonne et de la troisième à la quatrième ligne de rangée.

Presque toutes les divs ont été configurées de la sorte. Seule exception, le #sitemast. Il commence à la première ligne de colonne et à la première ligne de rangée, mais comme il devait s'étendre sur toute la grille, j'ai réglé la valeur colonne à 1 / span 2, ce qui signifie "commencer à la ligne de colonne 1 et s'étendre sur 2 colonnes". J'aurais obtenu le même résultat avec la valeur 1 / 3 qui signifie "aller de la ligne de colonne 1 à la ligne de colonne 3". (Fig. 5)

Fig. 5 : Le placement des items grid

Mais attention : ce n'est qu'un diagramme, pas la situation réelle — en tout cas, pas encore. Une chose doit être claire : même si l'on peut attribuer explicitement des rangées et des colonnes à chacun de nos items grid, rien ne nous y oblige. Grid a un modèle de flux qui permet à chaque item d'être automatiquement placé dans la cellule ouverte qui suit, selon la direction du flux. Dans notre exemple, j'aurais pu littéralement m'en sortir avec ces quelques règles :

#sitemast {
   grid-column: 1 / span 2;
}

#navigate {
   grid-row: 2; 
   grid-column: 1;
}

Le masthead aurait eu deux colonnes de large et la div de navigation aurait été placée exactement dans la cellule souhaitée. La première cellule de la deuxième rangée aurait donc été remplie par la navigation et les cellules suivantes seraient restées ouvertes.

Avec ce système, les items non attribués seraient placés dans l'ordre de la source. Le masthead (#sitemast) dans la première rangée de deux colonnes qu'il peut trouver — qui se trouve être la première rangée, la div de la recherche dans la cellule ouverte suivante, qui est à la deuxième rangée, colonne 2, puisque sur cette rangée la colonne 1 est occupée par la navigation. Et ensuite, la div main occuperait la première cellule ouverte, rangée 3, colonne 1, et la div extra la cellule suivante, rangée 3, colonne 2. Puis le footer serait placé en rangée 4, colonne 1.

Le résultat final serait identique à celui de la Fig. 5. La différence est que si j'avais une page particulière dans mon site, comprenant une div supplémentaire, ma mise en page risquerait d'être fichue en l'air, en fonction de l'endroit où elle se situe dans le HTML. En attribuant des emplacements explicites aux composantes de mon layout, j'évite ce genre d'inconvénients.

Avec les styles que j'ai écrits, si un élément enfant du body est ajouté à une page, il deviendra un item grid. Si je ne lui attribue pas d'emplacement particulier, il sera placé dans la première cellule libre disponible. Puisque la cellule en bas à droite (rangée 4, colonne 2) est vide, c'est l'endroit qui lui sera attribué... à condition que l'item ne s'étende pas sur deux colonnes, auquel cas il se retrouvera en bas de notre grille, dans une cinquième rangée automatiquement créée.

Prendre en compte le passé

La grille est facile à configurer, cependant lorsque vous y déposez vos items, ils viennent avec les styles existants. Dans certains cas, cela ne pose pas de problème, mais dans mon cas, toutes les marges et les paddings créaient un certain désordre lié au nouveau placement, comme vous pouvez le voir dans cette copie locale. (Fig. 6)

Fig. 6 : Grid + styles historiques = aaaarghh...

Aïe. Le temps était venu de de donner la priorité à de nouveaux styles, tout en conservant les anciens pour les navigateurs qui ne comprennent pas Grid.

Pour ce faire, j'ai simplement enveloppé mes règles Grid dans un block @supports ( NdT : voir l'article CSS @supports va vous changer la vie.). Comme je voulais limiter la mise en page Grid aux écrans larges, j'ai ajouté un bloc @media à l'intérieur de @supports. J'ai ensuite éliminé ou modifié les marges et paddings dont je n'avais pas besoin dans le contexte Grid. Voici ce que ça a donné :

@supports (display: grid) {
   @media (min-width: 60.001em) {
      body {
         display: grid;
         grid-template-rows: 192px min-content min-content 1fr;
         grid-template-columns: 1fr 20em;
      }

      #sitemast {
         grid-row: 1; 
         grid-column: 1 / span 2;
      }

      #search {
         grid-row: 2; 
         grid-column: 2;
         position: static; 
         padding: 0.25em 0 1em;
      }

      #main {
         grid-row: 3; 
         grid-column: 1;
         margin-right: 0; 
         margin-top: 1.25em;
         padding-top: 0;
      }
   
      .hpg #main {
         margin-top: 0; 
         padding-top: 0;
      }

      #extra {
         grid-row: 3; 
         grid-column: 2;
         position: static; 
         top: 0;
         margin-top: 0;
         padding-top: 0.5em; 
         margin-left: auto;
      }

      #navigate {
         grid-row: 2; 
         grid-column: 1;
         position: static; 
         margin-top: 1px; 
         padding-bottom: 0;
      }

      #footer {
         grid-row: 4; 
         grid-column: 1;
         margin-right: 0;
      }
   }
}

Je pourrais sans doute refactoriser un peu, mais pour l'instant je vais laisser les choses telles quelles. On voit clairement ce qui devait être fait pour chaque item grid — lesquels devaient avoir leur règle position écrasée pour que leur positionnement absolu ne vienne pas interagir bizarrement avec la grille, quelles marges et paddings devaient être modifiés, etc. Voici le résultat final. (Fig. 7)

Fig. 7 : Grid + @supports = Yesssss !

Vous vous direz peut-être beaucoup de bruit pour rien. Pourquoi tous ces efforts pour parvenir au même résultat ? L'important ici, dans ce cas simple, c'est que je n'ai plus besoin de me préoccuper de chevauchements. Le footer sera toujours positionné sous les div main et extra quelle que soit la taille de chacune. Lorsque j'utilisais le positionnement, ce n'était jamais garanti.

De même, la navigation et la recherche maintiendront toujours une hauteur partagée, ce qui nous garantit qu'il n'y aura pas non plus de chevauchement avec le contenu qui les suit. Et grâce à min-content je n'ai pas besoin de deviner leur hauteur. Grid s'en occupe pour moi.

Rappelez-vous, avec le positionnement, la mise en page fonctionne toujours dans les anciens navigateurs. Je n'ai pas "cassé" le site pour les navigateurs qui ne comprennent pas Grid. Le layout Grid est là, prêt pour les navigateurs modernes qui le comprennent.

Si vous voulez voir comment ça marche, rendez vous sur meyerweb et inspectez les éléments avec Firefox 52 ou plus. Vous verrez une petite icône en forme de gaufre à côté de la déclaration display: grid sur l'élément body. Cliquez dessus, et Firefox dessinera les lignes de grille sur la page (vous pouvez également voir un outil de layout encore plus puissant sur Firefox Nightly. Voir mon article Grid Inspection pour plus de détails).

Conventions de nommage

J'ai mentionné précédemment la possibilité de nommer les lignes de grilles. Je ne l'ai pas fait pour mes propres styles parce que la grille était vraiment simple, mais pour des grilles plus sophistiquées il peut être utile de le faire.

Si je reviens à mes styles Grid du début, des lignes de grille nommées pourraient ressembler à ceci :

body {
   display: grid;
   grid-template-rows: [masthead] 192px [navsearch] min-content [mainextra] min-content [footer] 1fr;
   grid-template-columns: [left] 1fr [middle] 20em [right];
}

Chaque mot entre crochets est attribué comme nom à la ligne de grille correspondante. (Fig. 8)

Fig. 8 : Lignes de grille nommées

Une fois ces noms définis, vous pouvez vous y référer dans vos propriétés grid-row et grid-column. Par exemple :

#sitemast {
   grid-row: masthead; 
   grid-column: left / span right;
}

#search {
   grid-row: navsearch; 
   grid-column: middle;
}

#main {
   grid-row: mainextra; 
   grid-column: left;
}

#extra  {
   grid-row: mainextra; 
   grid-column: middle;
}

#navigate {
   grid-row: navsearch; 
   grid-column: left;
}

#footer {
   grid-row: footer; 
   grid-column: left;
}

Un peu comme pour les noms de classes, on peut attribuer plusieurs noms à une ligne de grille en donnant une liste de noms spérés par un espace. Par exemple pour les dimensions, on pourrait avoir :

grid-template-columns: [start left] 1fr [middle sidebar] 20em [right end];

On peut se référer à n'importe lequel de ces noms dans notre déclaration grid-column. Il n'y a pas de limite au nombre de noms, mais soyez raisonnable (with great power etc...).

Au cas où vous vous poseriez la question, vous pouvez mélanger les noms et les numéros de lignes de grille, donc grid-row: navsearch; grid-column: 2; ne pose aucun problème. Vous pouvez utiliser n'importe quel nom que votre navigateur peut parser, c'est à dire tout ce qui est possible pour Unicode et CSS.

Grid et Flexbox

Vous vous dites peut-être maintenant que nous avons Grid, est-ce qu'on jette Flexbox ? Absolument pas !! Les deux peuvent et doivent fonctionner très bien ensemble ( NdT : voir l'article Grid et Flexbox, le duo gagnant.).

Prenez la barre de navigation de mon design. Pendant des années il a été mis en page via une liste non ordonnée et un float: left pour la liste des items. Le CSS et le markup HTML simplifiés :

//CSS
#navlinks {
  float: left; 
  width: 100%;
}

#navlinks li {
  float: left; 
  list-style: none; 
  margin-left: 1px;
}
===============
//HTML
<div id="navigate">
   <ul id="navlinks">
     <li><a href="…">Archives</a></li>
     <li><a href="…">CSS</a></li>
     <li><a href="…">Toolbox</a></li>
     <li><a href="…">Writing</a></li>
     <li>><a href="…">Speaking</a></li>
     <li>>><a href="…">Leftovers</a></li>
   </ul>
</div>

Pourquoi pas display: inline-block plutôt que float: left ? Parce que ce n'était même pas une option lorsque j'ai écrit le CSS pour les navlinks et je ne l'ai pas mis à jour. Mais maintenant, j'ai deux options bien plus intéressantes, Grid et Flexbox. Je pourrais bien définir une grille, qui ressemblerait à ceci :

#navlinks {
  display: grid;
  grid-template-columns: repeat(6,min-content);
}

#navlinks li {
  list-style: none; 
  margin-left: 1px;
}

Cela nous donnerait le même résultat qu'avant, mais sous forme de grille, ce qui est beaucoup plus solide que les floats ou les blocks inline.

Cependant, j'utiliserais Grid, qui est un système de mise en page en deux dimensions, pour un morceau de layout en une dimension. Même si ce n'est pas interdit, c'est un peu exagéré et en tout cas ce n'est pas l'idée de Grid. Flexbox, lui, a été conçu exactement pour cela.

Donc j'écrirais plutôt ceci par exemple :

#navlinks {
  display: flex; 
  justify-content: flex-start; 
  flex-wrap: wrap;
}

#navlinks li {
  list-style: none; 
  margin-left: 1px;
}

Là encore, cela nous donnera en gros le même résultat, mais en plus robuste. Non seulement tous les liens sont alignés, mais de plus la valeur wrap permet un retour à la ligne si nécessaire. Et du fait que flexbox est situé à l'intérieur d'un item grid faisant partie d'une rangée grid dont la hauteur est min-content, tout accroissement de hauteur (lié à un retour à la ligne ou autre) entraînera une augmentation de la hauteur de la rangée. Autrement dit, les rangées suivantes seront déplacées vers le bas.

Et puisque je regarde à nouveau mon markup, je me rends compte que je peux le simplifier sans avoir besoin de toucher à aucun style de grille. Plutôt que d'envelopper la liste dans une div, Je peux supprimer la div et réattribuer son ID à la liste :

<ul id="navigate">
  <li><a href="…">Archives</a></li>
  <li><a href="…">CSS</a></li>
  <li><a href="…">Toolbox</a></li>
  <li><a href="…">Writing</a></li>
  <li><a href="…">Speaking</a></li>
  <li><a href="…">Leftovers</a></li>
</ul>

Après ajustement des sélecteurs de mon CSS de #navlinks à #navigate, la mise en page sera exactement la même qu'auparavant. L'ul devient un item grid et un container flex.

L'inconvénient dans mon cas serait la gestion des interactions entre ce changement et la version ancienne, mais ce n'est pas très compliqué. Il faut juste le faire.

Inconvénients ?

Alors quels sont les inconvénients ? Il n'y en a pas beaucoup, mais ils existent.

Fondamentalement, il n'existe pas de manière de définir une grille de page générale à laquelle tous les items seraient reliés. En d'autres termes, si je dis :

body {
 display: grid;
 grid-template-columns: repeat(16, 1fr);
}

...alors je configure une grille flexible de 16 colonnes pour l'élément body seul, et ses éléments enfants sont les seuls qui puissent devenir des items grid. Je ne peux pas creuser en profondeur dans l'arborescence du document et attribuer à des éléments un placement dans la grille. C'est principalement pour cette raison que je n'ai pas essayé de mettre les petits éléments de sidebar dans une grille partagée : c'est impossible, du moins jusqu'à présent, à moins de se résoudre à quelques bidouillages HTML ou CSS.

Pour y parvenir, il faudrait ce qu'on appelle des sous-grilles (subgrid) et celles-ci ne sont encore implémentées dans aucun navigateur. Des discussions sont en cours pour savoir comment elles devraient, ou ne devraient pas marcher, et on peut être confiant que cela se fera au bout du compte. Mais il est dommage de ne pas les avoir encore, ce manque restreint la portée de la puissance de Grid, mais on peut espérer que ce ne sera pas trop long.

Dans l'intervalle, Je suis sûr que certains trouveront des solutions pour contourner ces limites. Une solution basique dans ce cas : je pourrais définir une grille qui s'applique à chaque article de blog individuellement et arranger les morceaux d'articles dans ces grilles imbriquées. Le CSS serait du genre :

div.post {
  display: grid;
  grid-template-columns: [meta] 10em [main] 1fr;
  grid-template-rows: [title] min-content [main] 1fr;
}

Avec cela, je pourrais placer les métadonnées, le titre, et le texte de l'article dans les cellules de grille définies, en utilisant les numéros de lignes ou les noms de lignes :

div.post h3 {
  grid-column: 2; 
  grid-row: title;
}

ul.meta {
  grid-column: meta; 
  grid-row: main;
}

div.post div.text {
  grid-column: main; 
  grid-row: main;
}

L'inconvénient est que les métadonnées sont obligées d'avoir une certaine largeur, alors que je voudrais configurer une colonne partagée par toutes les métadonnées, qui serait dimensionnée en fonction du contenu le plus long. Ce n'est pas pire que ce que j'ai maintenant, puisque je règle les métadonnées flottées à une largeur spécifique. C'est juste une opportunité (temporairement) manquée.

Autre limite — qu'on pourra peut-être résoudre ? — est que nous ne pouvons pas styler directement les cellules de grille. Supposons que nous voulions mettre une boîte autour du sidebar #extra, et que la cellule soit complètement remplie, je devrais styler la div. Aujourd'hui, je ne peux pas faire quelque chose comme ceci :

@grid-cell(2, 3) {
  background: teal; 
  border: 1px solid;
}

Je ne suis pas sûr que la syntaxe ressemblerait à cela, et cette possibilité commence juste à être discutée au sein du groupe de travail. Si vous avez des cas d'usage, partagez-les avec le monde et avec les experts de www.style. Plus il y aura de cas réels, plus nous pourrons défendre l'intérêt de développer ces fonctionnalités.

Il y aura, inévitablement, des bugs à réparer. Par exemple, alors que j'étais en train de terminer la rédaction de cet article, j'ai découvert que dans certaines situations Chrome 57 peut retourner une page blanche lorsqu'on utilise Grid. La cause est semble-t-il dans l'escamotage d'éléments positionnés absolument et peut être déclenché par des extensions comme Window Resizer et LastPass. La bonne nouvelle est qu'une solution a été acceptée pour Chrome 58, donc le problème sera résolu fin avril au plus tard.

Grid Power

J'espère que cette exploration de l'application de Grid à un site réel vous a donné le goût d'en savoir plus. Mais je dois vous prévenir que je ne vous ai donné qu'une bouchée, et petite avec ça. Je n'ai fait qu'effleurer la surface de ce que la syntaxe Grid rend possible, alors si cela a excité votre imagination, je vous encourage a expérimenter de votre côté et à plonger dans la spécification pour avoir une idée de tout ce qui est possible.

Mais plus encore, ce que j'ai gratté ici n'était qu'une infime ride aux limites externes de la surface de tout ce que Grid rendra possible. Il peut rendre nos designs existants plus flexibles, plus robustes et plus faciles à maintenir. C'est déjà très bien. Mais il rend possibles des mises en pages dont nous n'avions jamais rêvé car ils étaient impossibles à réaliser avec les outils dont nous disposions. De nouvelles techniques, peut-être même de nouveaux mouvements artistiques, sont encore à découvrir. Nous n'avons jamais vécu un tel changement de phase depuis le passage des tables à CSS. Nous sommes en partance pour un nouveau royaume et j'espère que vous serez du voyage.

Ressources

Comme je l'ai dit, cet article est au mieux une introduction. Vous voulez en savoir plus ? Voici quelques ressources pour aller de l'avant :

en anglais

en français


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS-Grid parus dans la Cascade.


original paru le 23 mars 2017 dans A List Apart
Traduit avec l’aimable autorisation de A List Apart et de l’auteur.
Copyright A List Apart © 2017
.

Sur l’auteur : travaille pour le web depuis 1993. Il est le fondateur de Spiral Consulting, cofondateur du mouvement des microformats, et cofondateur (avec Jeffrey Zeldman) de An Event Apart. Auteur populaire, il vit avec sa famille à Cleveland.