CSS Grid

developer.mozilla.org
www.w3schools.com

Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS
qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables
par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.

Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux,
la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux.

Une grille est un ensemble de lignes horizontales et verticales qui se croisent.

La grille CSS est préférée aux tableaux HTML à des fins de mise en page en raison de sa flexibilité, de sa réactivité et de ses performances supérieures. Contrairement aux tableaux, qui sont rigides et conçus pour les données tabulaires, CSS Grid permet des mises en page dynamiques et bidimensionnelles qui peuvent s'adapter de manière transparente à différentes tailles et orientations d'écran, ce qui le rend idéal pour une conception Web moderne et réactive.
Cette flexibilité permet aux développeurs de placer librement des éléments sur des lignes et des colonnes, de les réorganiser à l'aide de requêtes multimédias et de créer des conceptions complexes et visuellement attrayantes sans avoir besoin de tableaux imbriqués ou de styles en ligne, ce qui peut entraîner un code désordonné et difficile à maintenir.

CSS Grid offre également de meilleures performances en réduisant le besoin de balisage HTML excessif, ce qui réduit la taille des fichiers et accélère les temps de chargement des pages.
Les modifications de la structure de mise en page peuvent généralement être apportées en modifiant uniquement le fichier CSS, sans altérer le code HTML, ce qui simplifie la maintenance et la séparation du contenu et de la présentation.
De plus, CSS Grid prend en charge des fonctionnalités avancées telles que grid-template-areas, grid-gap et grid-auto-flow, qui permettent un contrôle précis de l'espacement et du flux de mise en page, améliorant à la fois la convivialité et l'attrait visuel.

Alors que les tableaux HTML sont sémantiquement appropriés et hautement accessibles pour afficher des données structurées telles que des calendriers, des rapports ou des comparaisons de produits, ce qui les rend plus faciles à interpréter pour les lecteurs d'écran, la grille CSS n'est pas intrinsèquement sémantique et nécessite une utilisation prudente des balises HTML sémantiques pour maintenir l'accessibilité.
Cependant, lorsqu'elle est utilisé pour la mise en page plutôt que pour la présentation des données, CSS Grid est le choix évident pour créer des applications Web modernes, efficaces et maintenables.

L'élément parent est le flex container.
Les élements enfants sont les flex items.
Exemple
<style>
.wrapper {display: grid;}
</style>

<div class="wrapper">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
  <div>Cinq</div>
</div>
Un
Deux
Trois
Quatre
Cinq
 
Les propriétés grid-template-columns et grid-template-rows permettent de définir des colonnes et des rangées.
Grille avec trois colonnes de 200 pixels de large.
Chaque élément sera disposé dans l'une des cellules de la grille. 
<style>
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
</style>
<div class="wrapper">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
  <div>Cinq</div>
</div>
Un
Deux
Trois
Quatre
Cinq
 
Espacement entre les colonnes et les lignes:
grid-column-gap: 10px;
grid-row-gap: 1em;
Unité Fr: Fraction de l'espace disponible 
<style>
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
</style>

<div class="wrapper">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
  <div>Cinq</div>
</div>
Un
Deux
Trois
Quatre
Cinq
 
<style>
.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}
</style>
<div class="wrapper">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
  <div>Cinq</div>
</div>
Un
Deux
Trois
Quatre
Cinq
 
<style>
.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 1fr;
}
</style>
<div class="wrapper">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
  <div>Cinq</div>
</div>
Un
Deux
Trois
Quatre
Cinq
 
<style>
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
/* Peut également s'écrire: */
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* cet exemple crée une colonne de 20px puis 6 colonnes, et 1 colonne de 20px de large:*/
.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

/* 5X (1Fr | 2Fr) = 10 colonnes */
.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}
</style>
 
Hauteur fixe 
<style>
.wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}
</style>
<div class="wrapper">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
  <div>Cinq</div>
</div>
Un
Deux
Trois
Quatre
Cinq
 
Positionnement des éléments sur les lignes
Le Grid crée des colonnes et des lignes numérotées en comptant à partir de 1. 
<style>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /*Case largeur minimum de 100 pixels*/
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}
</style>

<div class="wrapper">
  <div class="box1">Un</div>
  <div class="box2">Deux</div>
  <div class="box3">Trois</div>
  <div class="box4">Quatre</div>
  <div class="box5">Cinq</div>
</div>
Un
Deux
Trois
Quatre
Cinq
 
Exemple 8 - Structure d'un site responsive sur 3 colonnes
<style>
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
}
.wrapper div{border:2px solid #F57F17;background:orange;opacity:0.6;}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: relative;
}
.abspos {
  position: absolute;
  top: 40px;
  left: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.5);
  color: #000;
  padding: 10px;
}
</style>

<div class="wrapper">
  <div class="box1">Un</div>
  <div class="box2">Deux</div>
  <div class="box3">
    Trois
    <div class="abspos">
      Ce bloc est positionné de façon absolue. Dans cet exemple la zone de la
      grille est le bloc englobant et le positionnement est calculé à partir des
      bords de la zone de la grille.
    </div>
  </div>
  <div class="box4">Quatre</div>
</div>
Un
Deux
Trois
Ce bloc est positionné de façon absolue. Dans cet exemple la zone de la grille est le bloc englobant et le positionnement est calculé à partir des bords de la zone de la grille.
Quatre
 
Exemple 9
Grille avec colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu).
Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales. 
<style>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1  3;
  grid-row: 1;
}
.two {
  grid-column: 2  4;
  grid-row: 1  3;
}
.three {
  grid-column: 1;
  grid-row: 2  5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
</style>

<div class="wrapper">
  <div class="one">Un</div>
  <div class="two">Deux</div>
  <div class="three">Trois</div>
  <div class="four">Quatre</div>
  <div class="five">Cinq</div>
  <div class="six">Six</div>
</div>
Un
Deux
Trois
Quatre
Cinq
Six
 
Exemple de table. Franchement utiliser la balise table serait plus simple.
Structure d'un site Responsive
You can use the grid-area property to name grid items.
This grid layout contains six columns and three rows: 
<style>
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
}

.grid-container > div {
  background-color: #f1f1f1;
  color:#000;
  padding: 10px;
  font-size: 30px;
  text-align: center;
}

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
</style>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>
Header
Menu
Main
Right
Footer