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.0

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.

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.0

À 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.0

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.0

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.0

Références

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