Module de disposition de grille CSS
Entête
Menu
Principale
À droite
Bas de page
Disposition de la grille
Le module CSS Grid Layout offre un système de mise en page basé sur une grille, avec des lignes et des colonnes, facilitant la conception de pages Web sans avoir à utiliser de flotteurs et de positionnement.
Prise en charge du navigateur
Les propriétés de la grille sont prises en charge dans tous les navigateurs modernes.
| 57.0 | 16.0 | 52.0 | 10 | 44 |
Éléments de grille
Une mise en page de grille se compose d'un élément parent, avec 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
Afficher la propriété
Un élément HTML devient un conteneur de grille lorsque sa displaypropriété est définie sur
gridou inline-grid.
Exemple
.grid-container {
display: grid;
}
Exemple
.grid-container {
display: inline-grid;
}
Tous les enfants directs du conteneur de grille deviennent automatiquement des éléments de grille .
Colonnes de la grille
Les lignes verticales des éléments de la grille sont appelées colonnes .
Lignes de la grille
Les lignes horizontales des éléments de la grille sont appelées lignes .
Lacunes de la grille
Les espaces entre chaque colonne/ligne sont appelés espaces .
Vous pouvez ajuster la taille de l'écart à l'aide de l'une des propriétés suivantes :
grid-column-gapgrid-row-gapgrid-gap
Exemple
La grid-column-gappropriété définit l'écart entre les colonnes :
.grid-container {
display: grid;
grid-column-gap: 50px;
}
Exemple
La grid-row-gappropriété définit l'écart entre les lignes :
.grid-container {
display: grid;
grid-row-gap: 50px;
}
Exemple
La grid-gappropriété est une propriété abrégée pour le
grid-row-gapet les
grid-column-gappropriétés :
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Exemple
La grid-gappropriété peut également être utilisée pour définir à la fois l'espace entre les lignes et l'espace entre les colonnes en une seule valeur :
.grid-container {
display: grid;
grid-gap: 50px;
}
Lignes de grille
Les lignes entre les colonnes sont appelées lignes de colonne .
Les lignes entre les rangées sont appelées lignes de rangée .
Reportez-vous aux numéros de ligne lorsque vous placez un élément de grille dans un conteneur de grille :
Exemple
Placez un élément de grille sur la ligne de colonne 1 et laissez-le se terminer sur la ligne de colonne 3 :
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Exemple
Placez un élément de grille sur la ligne de ligne 1 et laissez-le se terminer sur la ligne de ligne 3 :
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Toutes les propriétés de la grille CSS
| Property | Description |
|---|---|
| column-gap | Specifies the gap between the columns |
| gap | A shorthand property for the row-gap and the column-gap properties |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties |
| grid-auto-columns | Specifies a default column size |
| grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
| grid-auto-rows | Specifies a default row size |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-gap | Specifies the size of the gap between columns |
| grid-column-start | Specifies where to start the grid item |
| grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-gap | Specifies the size of the gap between rows |
| grid-row-start | Specifies where to start the grid item |
| grid-template | A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties |
| grid-template-areas | Specifies how to display columns and rows, using named grid items |
| grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
| grid-template-rows | Specifies the size of the rows in a grid layout |
| row-gap | Specifies the gap between the grid rows |