Disposition de la grille CSS


Table des matières

    Afficher la table des matières

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 :

Header

Menu

Main

Right

Footer


Essayez-le vous-même →

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

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</p>

<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>

</body>
</html>


Une disposition en grille doit avoir un élément parent avec la propriété display définie sur grid.

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

1
2
3
4
5
6
7

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-row: 1;
  grid-column: 1;
}

.item2 {
  grid-row: 1;
  grid-column: 2;
}

.item3 {
  grid-row: 1;
  grid-column: 3;
}

.item4 {
  grid-row: 2;
  grid-column: 1;
}

.item5 {
  grid-row: 2;
  grid-column: 2;
}

.item6 {
  grid-row: 2;
  grid-column: 3;
}

.item7 {
  grid-row: 3;
  grid-column: 1 / span 3;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>  
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
  <div class="grid-item item6">6</div>  
  <div class="grid-item item7">7</div>
</div>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em>.</p>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

</body>
</html>

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, ce qui facilite la conception de pages Web sans avoir à utiliser de flotteurs ni 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 disposition en 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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<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>

</body>
</html>




Propriété d'affichage

Un élément HTML devient un conteneur de grille lorsque sa propriété display est réglé sur grille ou grille-en-ligne.

Exemple

 .grid-container {
  
  display: grid;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>display: grid</h1>

<p>Use display: grid; to make a block-level grid container:</p>

<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>

</body>
</html>


Exemple

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>display: inline-grid</h1>

<p>Use display: inline-grid; to make an inline grid container:</p>

<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>

</body>
</html>


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 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'espace à l'aide de l'une des propriétés suivantes :

  • column-gap
  • row-gap
  • gap

Exemple

La propriété column-gap définit l'écart entre les colonnes :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The column-gap Property</h1>

<p>Use the <em>column-gap</em> property to adjust the space between the columns:</p>

<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>

</body>
</html>


Exemple

La propriété row-gap définit l'espace entre les lignes :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  row-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The row-gap Property</h1>

<p>Use the <em>row-gap</em> property to adjust the space between the rows:</p>

<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>

</body>
</html>


Exemple

La propriété gap est une propriété abrégée pour le row-gap et le Propriétés column-gap :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 50px 100px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The gap Property</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</p>

<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>

</body>
</html>


Exemple

La propriété gap peut également être utilisée pour définir à la fois l'espacement des lignes et le écart de colonne en une valeur :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The gap Property:</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows:</p>

<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>

</body>
</html>



Lignes de quadrillage

Les lignes entre les colonnes sont appelées lignes de colonnes.

Les lignes entre les lignes sont appelées lignes de lignes.

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;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>


Exemple

Placez un élément de grille sur la ligne 1 et laissez-le se terminer sur la ligne 3 :

 .item1 {

    grid-row-start: 1;
  grid-row-end: 3;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>



Toutes les propriétés de la grille CSS

column-gap

Spécifie l'écart entre les colonnes

gap

Une propriété raccourcie pour les propriétés row-gap et column-gap

grid

Une propriété raccourcie pour les grid-template-rows, colonnes de modèle de grille, zones de modèle de grille, lignes automatiques de grille, grid-auto-columns et les propriétés grid-auto-flow

grid-area

Soit il spécifie un nom pour l'élément de grille, soit cette propriété est une propriété abrégée pour grid-row-start, grid-column-start, grid-row Propriétés -end et grid-column-end

grid-auto-columns

Spécifie une taille de colonne par défaut

grid-auto-flow

Spécifie comment les éléments placés automatiquement sont insérés dans la grille

grid-auto-rows

Spécifie une taille de ligne par défaut

grid-column

Une propriété raccourcie pour les propriétés grid-column-start et grid-column-end

grid-column-end

Spécifie où terminer l'élément de grille

grid-column-gap

Spécifie la taille de l'espace entre les colonnes

grid-column-start

Spécifie où commencer l'élément de grille

grid-gap

Une propriété raccourcie pour les propriétés grid-row-gap et grid-column-gap

grid-row

Une propriété raccourcie pour les propriétés grid-row-start et grid-row-end

grid-row-end

Spécifie où terminer l'élément de grille

grid-row-gap

Spécifie la taille de l'espace entre les lignes

grid-row-start

Spécifie où commencer l'élément de grille

grid-template

Une propriété raccourcie pour les grid-template-rows et grid-template-columns et propriétés zones de grille

grid-template-areas

Spécifie comment afficher les colonnes et les lignes, à l'aide d'éléments de grille nommés.

grid-template-columns

Spécifie la taille des colonnes et le nombre de colonnes dans une disposition en grille

grid-template-rows

Spécifie la taille des lignes dans une disposition en grille

row-gap

Spécifie l'écart entre les lignes de la grille