CSS & Grid | Code + HTML + CSS, La Mise En Page Simplifié

Historique

Après les tableaux, les flottants, les inline-block et Flexbox…

Depuis 2017, il est possible d’utiliser un nouveau modèle de positionnement conçu pour la mise en page, Grid ou « CSS Grid Layout » (pour vos recherches sur le web). Ce modèle étant jeune, certains navigateurs ne peuvent pas l’utiliser.

Certains Mac sont « bloqués » sur Mac OS 10.6.8, ce qui implique l’installation d’un Google Chrome version 49 (v69 en octobre 2018) sans support de Grid par défaut.

Flexbox ou Grid

Actuellement, Flexbox ayant un meilleur support avec 96% des utilisateurs (en France) contre 93% pour Grid, il semble plus judicieux d’utiliser Flexbox. Néanmoins, dans un futur proche le support sera identique et le choix moins lié aux utilisateurs. Pour faire simple, flexbox marche bien sur les éléments dans les blocs d’une page (logo et menu dans header, navigation dans footer…) et Grid pour placer tous les blocs.

Sauf projet particulier, vous pouvez faire votre site en utilisant le display grid puis vérifier que sans grid l’information reste accessible et lisible.

Première grille

En appliquant le display:grid sur un élément, on peut contrôler ses enfants directs. Cette propriété seule ne suffit pas, contrairement à Flexbox. Ensuite, il faut définir un gabarit pour les colonnes (et/ou les rangs) et enfin les gouttières, si besoin.

.grid{ padding:0; margin:12px; display:grid; /* le fameux */ grid-template-columns:80px 100px 150px; /* 3 colonnes de largeur différente */ grid-template-rows:100px 200px; /* 2 rangées */ grid-gap: 12px 16px; /* ou une seule valeur si la gouttière est identique en x et y */ gap:12px 16px; /* - écriture moderne */ }

See the Pen grid 01 by Benoît Wimart (@benoitwimart) on CodePen.

Placement dans la grille

Chaque enfant de la grille peut être placé sur une cellule précise avec un point de départ et un point d’arrivée (ou un nombre de cellules à étirer). Pour cela, on compte les lignes de la grille de 1 à N (2 colonnes = 3 lignes |…|…| ) et on utilise grid-column et/ou grid-row.

Il n’est absolument pas nécessaire de mettre des coordonnées sur tous les éléments. h1{ /* typographie */ grid-column:1 / 4; /* de 1 à 4 */ grid-column:1 / span 3; /* idem de 1 à 4 */ background:#f60; } p:nth-of-type(1){ /* astuce pour le p n°1 */ background:#f60; grid-row:1 / 4; grid-column:4 / 5; }

See the Pen grid 02 by Benoît Wimart (@benoitwimart) on CodePen.

Sans mettre toutes les coordonnées

See the Pen grid 02.bis by Benoît Wimart (@benoitwimart) on CodePen.

GTC

En tapant gtc+tab, emmet va écrire grid-template-columns. Cette propriété permet de définir la grille des colonnes. Une unité spéciale permet d’écrire des grilles facilement, le « fr » (fraction). On peut voir celle-ci comme des pourcentages avec une amélioration/simplification des calculs quand on a des gouttières (gap). Sans les fr, 50% + 50% + 24px de gouttière = 100% + 24px, ça déborde. Avec les fr, 1fr + 1fr + 24px de gouttières = (50% – 12px) + (50% – 12px) + 24px = 100%.

.grid{ display:grid; /* obligatoire pour définir le gtc */ grid-template-columns: 1fr 1fr; /* 2 colonnes de largeur identique */ } .grid{ display:grid; /* obligatoire pour définir le gtc */ grid-template-columns: repeat(3, 1fr); /* 3 colonnes de largeur identique */ } .grid{ display:grid; /* obligatoire pour définir le gtc */ grid-template-columns: 200px repeat(3, 1fr); /* une colonne de 200px + 3 colonnes de largeur identique */ } .grid{ display:grid; /* obligatoire pour définir le gtc */ grid-template-columns: repeat(3, 320px); /* 3 colonnes de 320px */ }

GTR

En tapant gtr+tab, emmet va écrire grid-template-rows. Cette propriété permet de définir la grille des rangées.

Attention, il n’est pas nécessaire/obligatoire de mettre un grid-template-rows, si vos colonnes sont fluides et qu’elles s’ajustent à la largueur, une grille horizontale peut devenir un casse-tête si vous devez maintenir des ratios. .grid{ display:grid; /* obligatoire pour définir le gtc */ grid-template-rows: repeat(3, 1fr); /* 3 rangées de hauteur identique ou pas :( */ }

Dans tes rêves

Ceci ne marche pas toujours comme prévu car la hauteur est souvent basée sur le contenu, un body avec une ligne de texte aura la hauteur de celle-ci (et pas la hauteur de la page).

En vrai

.grid{ display:grid; /* obligatoire pour définir le gtc */ min-height:100vh; /* on force la hauteur 100vh = 100% de la hauteur */ /* sans gtr, plusieurs rangées de hauteur identique, grid par défaut */ } .grid{ display:grid; /* obligatoire pour définir le gtc */ min-height:100vh; /* on force la hauteur 100vh = 100% de la hauteur */ grid-template-rows: repeat(3, 1fr); /* 3 rangées de hauteur identique */ /*********** ~33.33vh, sauf si une rangée contient un élément plus grand que ~33.33vh, une image de 2000px de haut forcera à 3 rangées de 2000px ************/ }

Auto plus

Deux propriétés peuvent vous dépanner dans les cas complexes : grid-auto-rows: 200px; permet de créer des rangées supplémentaires avec une hauteur définie (à la place d’automatique). grid-auto-flow: row dense; avec cette valeur, permet de remplir « si possible » les row (rangées) en modifiant l’ordre des enfants.

À savoir

Le centrage du bloc

En ajoutant un margin:auto sur l’enfant, si le parent a un display:grid (attention il faut souvent ajouter un height sur le parent), on centre !

See the Pen grid + margin auto by Benoît Wimart (@benoitwimart) on CodePen.

Le centrage du contenu

Ici, on pilote le placement à partir du père (cas fréquent)

See the Pen grid + align-items + justify-items by Benoît Wimart (@benoitwimart) on CodePen.

La superposition

En donnant des grid-column et grid-row identique on superpose les éléments.

See the Pen grid + superposition by Benoît Wimart (@benoitwimart) on CodePen.

Références

https://css-tricks.com/… https://la-cascade.io/… https://labs.jensimmons.com/ https://cssgridgarden.com/#fr