CSS Grid Layout

Note : À l'heure actuelle, le module sur les grilles CSS reste une technologie expérimentale et la plupart des navigateurs utilisent une préférence qui doit être activée pour utiliser cette API. Consultez le tableau de compatibilité de chacune des propriétés et des fonctions pour plus d'informations sur l'interopérabilité à ce sujet.

Le module CSS Grid layout (disposition en grille) est un module de la spécification CSS qui permet de créer des dispositions 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 pour les tableaux, la disposition en grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la disposition en grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses dispositions qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.

Exemples

CSS

.wrapper { 
  display: grid; 
  grid-template-columns: 100px 100px 100px; 
  grid-gap: 10px; 
  background-color: #fff; 
  color: #444; 
} 

.box { 
  background-color: #444; 
  color: #fff; 
  border-radius: 5px; 
  padding: 20px; 
  font-size: 150%; 
}

HTML

<div class="wrapper">
  <div class="box a">a</div>
  <div class="box b">b</div>
  <div class="box c">c</div>
  <div class="box d">d</div>
  <div class="box e">e</div>
  <div class="box f">f</div>
</div>

Résultat

Référence

Propriétés

Fonctions

Spécifications

Spécification	État	Commentaires
CSS Grid Layout	Version de travail	Définition initiale.