CSS Grid du futur

Vous en avez assez de bricoler vos mises en page web, CSS Grid est sera fait pour vous !

Le problème

Comment faire facilement des mises en page tel que les 2 exemples ci-dessous ?

exemple_formulaire        exemple_windows8

Les solutions du passé

  • des <table> : proscrit totalement;
  • des <div> et un display:table: problème d’espacement;
  • des div et des display:float : pas fait pour cela mais pour mettre une photo à coté d’un texte;
  • des div et des display:inline-block : problème d’espacement.

La vieille solution <table> est proscrite. Les autres solutions sont lourdes à mettre en œuvre, inadaptées ou provoquent de nombreux effets de bords difficiles à maîtriser.

Les solutions actuelles

Les solutions type bootstrap (960, …) imposent une taille de grille. Les solutions actuelles requièrent un volume non négligeable de CSS, surtout quand le site doit être « responsive design » afin de s’adapter aux différents supports (mobile, tablette, desktop…).

La solution du futur : CSS Grid

La solution ultime est la norme CSS Grid. Elle existe depuis de nombreuses années mais n’est actuellement supportée que par 2 navigateurs : Chrome (en mode débug) et IE 10.

compatiblite

Comment cela fonctionne  ?

Tout d’abord, avec CSS Grid, il faut comprendre le concept de grille virtuelle : Une grille avec des lignes et des colonnes dans laquelle nous allons disposer des éléments HTML classique. Cependant, cette grille n’existe pas physiquement, seul le containeur gobal doit exister. La grille n’a pas de limite.

Prenons un exemple

Voici le html : Et le CSS
<body>
    <nav>nav</nav>
    <section>section</section>
    <article>article</article>
    <aside>aside</aside>
</body>
body {
    display: grid;
    grid-columns: 250px 400px;
    grid-rows: 100px 300px;
}

nav       { grid-column: 1;    grid-row: 1; }
section { grid-column: 2;   grid-row: 1; }
article  { grid-column: 1;    grid-row: 2; }
aside    { grid-column: 2;   grid-row: 2; }

Dans cet exemple, le body est le conteneur. Il contient 2 colonnes de largeur 250px et 400px, et 2 lignes de hauteur 100px et 300px. Chacun des éléments est placé dans la grille.

La syntaxe est donc ultra simple.

Les unités

La spécification introduit de nouvelle unité :

  • fr: une fraction de l’espace restant;
  • min-content: taille de l’élément le plus petit;
  • max-content: taille de l’élément le plus grand;
  • fit-content: équivalent à « auto ».

Les alignements

La spécification introduit de nouveaux mots pour spécifier l’alignement des cellules :

  • justify-xxx : alignement horizontal;
  • align-xxx : alignement vertical.

Le xxx désigne l’élément dont l’alignement est défini. xxx peut être :

  • self: Alignement d’un bloc dans son parent;
  • items : alignement par défaut des blocs dans la grille;
  • content : Alignement de la grille dans son parent.

Les valeurs possibles sont :

  • start : aligne l’élément au début de la cellule (gauche ou droite selon le sens de la lecture);
  • end : aligne l’élément à la fin de la cellule (gauche ou droite selon le sens de la lecture);
  • center : place l’élément au centre de la cellule;
  • stretch: étire l’élément (ses marges) pour occuper tout l’espace dans la cellule.

Par exemple justify-self : center définit l’alignement centré d’un élément dans sa cellule.

Le chevauchement

La spécification introduit une nouvelle syntaxe pour définir le chevauchement. Dans un grid-column ou dans un grid-row, il faut indiquer la colonne de départ, le nombre de lignes ou de colonnes chevauchées.

Exemple 1 : grid-column: 2 / span 3
Cette propriété CSS définit que l’élément se place dans la 2ième colonne et va chevaucher les 3 colonnes situées sur la droite.

Exemple 2 : grid-row: span 1 / 2
Cette propriété CSS définit que l’élément se place dans la 2ième ligne et va chevaucher la ligne située au dessus.

Quelques précisions :

  • / est le séparateur entre la définition de la position et la définition du chevauchement;
  • span x définit un chevauchement de x colonne(s) supplémentaire(s);
  • Lorsque span x est en second (après la position et le /) alors le chevauchement se fait à droite ou en bas;
  • Lorsque span x est en premier (avant le / et la position) alors le chevauchement se fait à gauche ou en haut.

Les templates

Une fonctionnalité très intéressante est de pouvoir déclarer le positionnement des blocs directement dans le container.

La première étape consiste à nommer les blocks via la propriété grid-area :

nav       { grid-area: na; }
section { grid-area: sec; }
article  { grid-area: ar; }
aside    { grid-area: as; }

Puis, dans le container, la propriété grid-template-areas permet de définir le placement d’un seul coup.

body {
    display: grid;
    grid-columns: 250px  1fr 400px;
    grid-rows: 100px 300px;
    grid-template-areas: “na . sec”
“ar ar as”;
}

L’exemple montre que le bloc article chevauche 2 colonnes.

Conclusion

Les CSS Grid rend ultra simple l’écriture des mises en page. Plus besoin de JS ou d’une tonne de CSS. Il existe d’autres fonctionnalités avancés comme les sous-grilles ou la répétition. Les bruits courent que Firefox prépare cela pour sa prochaine release. En attendant une compatibilité plus forte, Flexbox sera votre meilleur ami.

Leave a Reply

Your email address will not be published. Required fields are marked *