Le point sur les grilles en CSS

Les grilles en CSS font souvent office de Saint Graal dans nos maquettes : toujours imitées, jamais égalées. Ou énoncé différemment : des fois ça marche, des fois ça marche pas.

EDIT : à l’aube de 2016, cet article bénéficie d’une suite dans cette réflexion : « Grid Layout, vers la grille parfaite ».

De très nombreux frameworks CSS proposent des solutions de grilles toutes plus sexy les unes que les autres, mais ont immanquablement recours à des hacks et des bidouilles multiples pour couvrir tous les cas de figure et bugs navigateurs. Mais pourquoi donc ?

Tout simplement parce qu’en 2014, en 18 ans de CSS, il n’existe toujours pas de modèle de positionnement idéal pour la conception de grilles de mise en page.

Faisons le point sur les solutions existantes, leurs avantages et limites, ainsi que sur les modules de positionnements que l’avenir nous réserve…


The Grid ?

Avant de choisir ou tenter de concevoir une grille CSS de mise en page, les critères suivants doivent être considérés :

  • fixe (pixels, nombre de colonnes figé), ou fluide (pourcentages, colonnes variables) ?
  • complexité de la mise en oeuvre ?
  • évolutive (possibilité de modifier le nombre d’éléments), ou figée ?
  • compatible anciens navigateurs ou non ?
  • offsets, pull et push (capacité à réaliser des “trous” dans la grille)
  • gouttière, pas gouttière ?

C’est finalement dernier critère qui sera généralement décisif…

Gouttière ou pas gouttière ?

La gouttière est l’espace que l’on peut souhaiter entre chaque “colonne”. Elle peut être :

  • de largeur fixe (en pixels par exemple),
  • de largeur fluide (en pourcentages par exemple),
  • de largeur inconnue (l’espace qui reste entre les éléments étant distribué automatiquement),
  • de largeur nulle (pas de gouttière)

Grille avec float

Le dinosaure des positionnements, mais aussi le plus compatible et le plus employé est tout à fait apte à construire des grilles CSS.

Compatibilité

La propriété CSS1 float est compatible depuis la nuit des temps. Disons pour simplifier “IE4 et le reste du monde”.

Exemple de code

.grid {
  overflow: hidden;
}
.grid > * {
  margin-left: -@gutter;
}
.grid > * > * {
  float: left;
  padding-left: @gutter;
}
.grid-4 > * {
  width: 25%;
}

Avantages

  • Float est le positionnement le plus compatible d’entre tous

Inconvénients

  • float est un positionnement “hors-flux”, ce qui implique certaines précautions voire bidouilles pour être contenu et maîtrisé (clear, BFC, etc.),
  • Si la grille nécessite des gouttières, la présence d’un conteneur global supplémentaire sera indispensable
  • La gestion des gouttières nécessite quelques adaptations non intuitives (marges négatives et/ou padding, overflow: hidden sur le conteneur, etc.)

Ressource

Grille avec inline-block

display: inline-block apporte son lot de nouvelles possibilités depuis son introduction à CSS2 : pouvoir aligner des blocs dimensionnés sans sortir du flux.

Compatibilité

IE8 (voire IE6 avec hack) et le reste du monde.

Exemple de code

.grid {
  overflow: hidden;
}
.grid > * {
  margin-left: -@gutter;
}
.grid > *  > * {
  display: inline-block;
  vertical-align: top;
  padding-left: @gutter;
}
:root .grid {
  font-size: 0;
}
:root .grid > * > * {
  font-size: 16px;
  font-size: 1rem;
}

Avantages

  • Il s’agit d’un positionnement dans le flux, avec tous les avantages que cela procure
  • S’il n’y a pas besoin de gouttière, ou si la taille de gouttière importe peu, alors le positionnement sera très intuitif (text-align: justify)

Inconvénients

  • Les inline-block génèrent systématiquement un espace indésirable difficile à maîtriser (nécessité de bidouiller via un font-size: 0 sur le parent par exemple)
  • Si la grille nécessite des gouttières, la présence d’un conteneur global supplémentaire sera indispensable
  • La gestion des gouttières nécessite quelques adaptations non intuitives (marges négatives et/ou padding, overflow: hidden sur le conteneur, etc.)

Ressources

Grille avec table-cell

À présent que nous avons laissé tomber les infâmes <table> HTML pour nos mises en page, il est possible de se tourner vers le modèle de positionnement tabulaire en CSS pour en tirer tous les avantages.

Compatibilité

IE8 (voire IE6 avec hack) et le reste du monde.

Exemple de code

.grid {
  overflow: hidden;
}
.grid > * {
  display: table;
  table-layout: fixed;
  border-spacing: @gutter 0;
  margin-left: -@gutter;
  margin-right: -@gutter;
}
.grid > * > * {
  display: table-cell;
}
.grid-4 > * {
  width: 25%;
}

Avantages

  • Il s’agit d’un positionnement dans le flux
  • Les hauteurs des colonnes sont identiques par défaut
  • La gestion des gouttières est assez intuitive (propriété border-spacing)

Inconvénients

  • Si la grille nécessite des gouttières, la présence d’un conteneur global supplémentaire sera indispensable
  • Le passage à la ligne est impossible (si la grille est prévue pour 4 éléments, le 5è n’ira pas à la ligne suivante mais demeureura aligné à côté de ses frères)
  • Pull et push réalisables mais nécessitent des éléments HTML vides

Ressources

Grille avec CSS3 columns

Les multicolonnes, introduites en CSS3, offrent la possibilité de… distribuer du contenu sur plusieurs colonnes. Et par extension, de réaliser des grilles en CSS.

Compatibilité

IE10 et le reste du monde

Exemple de code

.grid-4 {
  columns: 4;
  column-gap: @gutter;
}
.grid-4 > * {
  display: inline-block;
  width: 100%;
}

Avantages

  • Il s’agit d’un positionnement dans le flux
  • Nul besoin de conteneur supplémentaire
  • La gestion des gouttières est très intuitive et très simple (propriété column-gap)

Inconvénients

  • Les contenus passent d’une colonne à l’autre par défaut et il est difficile de contrecarrer ce comportement (par manque actuel de compatibilité des propriétés de saut de colonne)
  • L’ordre d’affichage des éléments est spécifique: ils se placent les uns sous les autres et non les uns à côté des autres
  • Pull et push non réalisables (en tout cas pas simplement)
  • Préfixes constructeurs encore nécessaires

Ressources

Grille avec CSS3 Flexbox

CSS3 Flexbox est un modèle de positionnement extrêmement polyvalent et redoutablement efficace. Il s’agit sans aucun doute d’un must-have pour la plupart de nos composants ou de nos mises en page dès aujourd’hui.

Compatibilité

IE10 et le reste du monde

Exemple de code

.grid-4 {
  display: flex;
  flex-wrap: wrap;
  margin-left: -@gutter;
}
.grid-4 > * {
  padding-left: @gutter;
}
.grid-4 > * {
  width: 25%;
}

Avantages

  • Il s’agit d’un positionnement dans le flux
  • Les hauteurs des colonnes sont identiques par défaut
  • S’il n’y a pas besoin de gouttière, ou si la taille de gouttière importe peu, alors le positionnement sera très intuitif (justify-content: space-between;)
  • Pull et push très intuitifs (un simple margin-left: auto; ou margin-right: auto; suffit)

Inconvénients

  • Si la grille nécessite des gouttières, la présence d’un conteneur global supplémentaire sera indispensable
  • La gestion des gouttières nécessite quelques adaptations non intuitives (marges négatives et/ou padding, overflow: hidden sur le conteneur, etc.)
  • Préfixes constructeurs encore nécessaires

Ressources

Grille avec CSS3 Grid

CSS3 Grid-Layout est un module de positionnement dédié à la conception de gabarits et de grilles, comme son nom l’indique. En théorie, il est donc parfait pour nous !

Compatibilité

Uniquement IE10 et Chrome avec flag activé

Exemple de code

.grid {
  display: grid;
  grid-template-columns: repeat(3, (col) 1fr 10px) (col) 1fr;
  grid-template-rows: auto ;
}
.grid > div:first-child {
  grid-column: col 1;
}
.grid > div:nth-child(2) {
  grid-column: col 2;
}
.grid > div:nth-child(3) {
  grid-column: col 3;
}

Avantages

  • Il s’agit d’un positionnement dans le flux
  • Très simple à mettre en oeuvre (= fait pour ça) en tout cas pour une structure simple
  • Hauteurs d’éléments identiques si souhaités
  • Nul besoin de conteneur supplémentaire
  • Pull et push simples et intuitifs

Inconvénients

  • Manque évident de compatibilité pour le moment
  • Préfixes constructeurs encore nécessaires
  • La gestion des gouttières est très complexe (oui c’est un comble !) : il est nécessaire de placer individuellement chaque élément dans sa colonne

Ressources

Du coup, qui utilise quoi ?

Voici listés quelques choix techniques de frameworks CSS connus concernant les grilles :

  • float est employé sur les grilles de Twitter Bootstrap, Foundation, Kube, 960gs, Skeleton, Gumby, Google WebStarter Kit
  • PureCSS : emploie une combinaison de flexbox et inline-block (ce dernier pour la compatibilité)
  • InuitCSS, Röcssti et KNACSS : se basent sur inline-block (EDIT : KNACSS 4 se base à présent sur Flexbox)

Conclusion

Comme on peut le constater, aujourd’hui encore aucune technique ne relève l’ensemble des défis et des critères que soulève la Grille CSS parfaite.

Pire, même les positionnements “d’avenir” tels que Multicolumns, Flexbox et Grid-Layout ne remplissent pas toutes les conditions… même s’ils s’en rapprochent.

EDIT : j’en ai profité pour rédiger un article sur Alsacréations nommé « Une grille responsive en Flexbox avec LESS »

5 réflexions au sujet de « Le point sur les grilles en CSS »

  1. Merci, c’est exactement ce que je cherchais. Simple, clair et précis, sans fioritures. Un très bon article qui m’enlève une épine du pied .-)

Les commentaires sont fermés.