Module de mise en page en grille CSS

En-tête
Menu
Principal
Droite
Pied de page

Essayer vous-même

Mise en page en grille

Le module de mise en page en grille CSS (CSS Grid Layout Module) fournit un système de mise en page basé sur une grille avec des lignes et des colonnes, ce qui rend la conception de pages Web plus facile sans utiliser de浮动 et de positionnement.

Prise en charge du navigateur

Tous les navigateurs modernes prennent en charge les propriétés de grille.

57.0 16.0 52.0 10 44

Éléments de grille

La mise en page en grille est composée d'un élément parent et d'un ou plusieurs éléments enfants.

Exemple

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

Essayer vous-même

Propriété d'affichage

lorsque l'élément HTML display la propriété est définie sur grid ou inline-grid quand, il deviendra un conteneur de grille.

Exemple

.grid-container {
  display: grid;
}

Essayer vous-même

Exemple

.grid-container {
  display: inline-grid;
}

Essayer vous-même

Tous les éléments directs enfants du conteneur de grille deviennent automatiquement des éléments de grille.

Colonnes de grille (Grid Columns)

Les lignes verticales des éléments de grille sont appelées colonnes.

Lignes de grille (Grid Rows)

Les lignes horizontales des éléments de grille sont appelées lignes.

Espaces de grille (Grid Gaps)

L'intervalle entre chaque colonne/ligne est appelé espace.

Vous pouvez ajuster la taille de l'intervalle en utilisant l'une des propriétés suivantes :

  • grid-column-gap
  • grid-row-gap
  • grid-gap

Exemple

grid-column-gap Cette propriété définit l'intervalle entre les colonnes :

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

Essayer vous-même

Exemple

grid-row-gap Cette propriété définit l'intervalle entre les lignes :

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

Essayer vous-même

Exemple

grid-gap Cette propriété est une abréviation des propriétés grid-row-gap et grid-column-gap :

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Essayer vous-même

Exemple

grid-gap Les propriétés peuvent également être utilisées pour définir la marge entre les lignes et les colonnes sur une valeur :

.grid-container {
  display: grid;
  grid-gap: 50px;
}

Essayer vous-même

Lignes de grille (Grid Lines)

Les lignes entre les colonnes sont appelées lignes de colonne (column lines).

Les lignes entre les rangées sont appelées lignes de rangée (row lines).

Lorsque vous placez un élément en grille dans un conteneur en grille, veuillez mentionner le numéro de ligne :

Exemple

Placer l'élément en grille sur la colonne 1 et le terminer à la colonne 3 :

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Essayer vous-même

Exemple

Placer l'élément en grille sur la ligne 1 et le terminer à la ligne 3 :

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Essayer vous-même