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 95,8% des utilisateurs contre 87,8% 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.

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{
  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-row-gap:12px; /* gouttière de rangées ancienne écriture */
  grid-column-gap:12px; /* gouttière de colonnes ancienne écriture */
  row-gap:12px; /* gouttière de rangées (à ajouter) */
  column-gap:12px; /* gouttière de colonnes (à ajouter) */
  padding:0; 
  margin:12px;
}

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