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 :
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.
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>
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.
Les propriétés de la grille sont prises en charge dans tous les navigateurs modernes.
57.0 | 16.0 | 52.0 | 10 | 44 |
Une disposition en grille se compose d'un élément parent, avec un ou plusieurs éléments enfants.
<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>
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>
Un élément HTML devient un conteneur de grille lorsque sa propriété display
est réglé sur grille
ou grille-en-ligne
.
.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>
.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.
Les lignes verticales des éléments de la grille sont appelées colonnes.
Les lignes horizontales des éléments de la grille sont appelées lignes.
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
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>
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>
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>
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>
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 :
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>
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>
Spécifie l'écart entre les colonnes
Une propriété raccourcie pour les propriétés row-gap et column-gap
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
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
Spécifie une taille de colonne par défaut
Spécifie comment les éléments placés automatiquement sont insérés dans la grille
Spécifie une taille de ligne par défaut
Une propriété raccourcie pour les propriétés grid-column-start et grid-column-end
Spécifie où terminer l'élément de grille
Spécifie la taille de l'espace entre les colonnes
Spécifie où commencer l'élément de grille
Une propriété raccourcie pour les propriétés grid-row-gap et grid-column-gap
Une propriété raccourcie pour les propriétés grid-row-start et grid-row-end
Spécifie où terminer l'élément de grille
Spécifie la taille de l'espace entre les lignes
Spécifie où commencer l'élément de grille
Une propriété raccourcie pour les grid-template-rows et grid-template-columns et propriétés zones de grille
Spécifie comment afficher les colonnes et les lignes, à l'aide d'éléments de grille nommés.
Spécifie la taille des colonnes et le nombre de colonnes dans une disposition en grille
Spécifie la taille des lignes dans une disposition en grille
Spécifie l'écart entre les lignes de la grille