Articles
Introduction au CSS
Propriétés CSS liées à la mise en page en grille

Propriétés CSS liées à la mise en page en grille

Cet article explique les propriétés CSS liées à la mise en page en grille.

Vous pouvez apprendre à décrire la grille et la grille en ligne.

YouTube Video

HTML pour l'aperçu

css-grid.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

Mise en page en grille

grille 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

Une grille est un système de mise en page permettant d'aligner les éléments en lignes et colonnes bidimensionnelles. En utilisant une grille, vous pouvez construire facilement et de manière flexible des mises en page complexes qui étaient difficiles avec des méthodes traditionnelles telles que float ou position. Alors que le flexbox excelle dans les mises en page unidimensionnelles, la grille est idéale pour les mises en page bidimensionnelles.

  • La classe grid-box applique une mise en page en grille en spécifiant grid dans la propriété display. Cet élément est appelé un conteneur de grille.
  • La propriété grid-template-columns spécifie la largeur des colonnes de la grille. Dans cet exemple, la première colonne fait 100px, la deuxième colonne fait 200px et la troisième colonne occupe l'espace restant (auto).
  • La propriété grid-template-rows spécifie la hauteur des rangées de la grille. La première rangée fait 100px, la deuxième rangée est automatique (auto), et la troisième rangée fait 50px de hauteur.
  • La propriété gap définit l'espacement entre les éléments de la grille. Ajout de 10px d'espace entre les colonnes et les rangées.

Terminologie de base

  1. Un conteneur de grille est un élément où la propriété display est définie sur grid, et ses enfants deviennent des éléments de grille.
  2. Les éléments de grille sont les éléments enfants placés directement sous un conteneur de grille.

Principales propriétés de la grille

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • Les propriétés grid-template-columns et grid-template-rows définissent la taille de chaque colonne et rangée.
  • Des unités telles que px et %, ainsi que fr (fraction) pour spécifier une proportion de l'espace restant, peuvent être utilisées.
    • Dans cet exemple, il y a trois colonnes, et la deuxième colonne a une largeur deux fois supérieure à celle des autres.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column et grid-row spécifient dans quelle colonne ou ligne l'élément de la grille sera placé.
    • Dans cet exemple, l'élément s'étend de la 2e colonne à la 4e colonne et de la 1re ligne à la 3e ligne.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows et grid-auto-columns sont des propriétés qui contrôlent la taille des lignes et des colonnes générées automatiquement lorsque les lignes ou les colonnes d'une grille ne sont pas explicitement définies.
    • Dans cet exemple, 2 lignes et 2 colonnes sont explicitement définies, mais si plus d'éléments sont ajoutés, de nouvelles lignes ou colonnes seront générées automatiquement conformément à grid-auto-rows et grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • Alignez les éléments de la grille horizontalement (justify-items) et verticalement (align-items).
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area spécifie en une seule fois dans quelle zone du conteneur de grille l'élément de grille doit être placé.
    • Dans cet exemple, cela signifie occuper de la 1re ligne à la 3e ligne et de la 2e colonne à la 4e colonne.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap ajoute de l'espace entre les colonnes et les lignes. Vous pouvez également spécifier l'espacement entre les colonnes et les lignes individuellement en utilisant column-gap et row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow est une propriété qui définit la direction dans laquelle les éléments sont placés, soit par rangée, soit par colonne.

Exemple de dispositions complexes 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

De cette manière, la grille vous permet de créer la mise en page d'une page web entière avec un code simple.

  • Dans cet exemple, il y a trois colonnes (barre latérale, contenu principal et publicité) et trois rangées (en-tête, contenu et pied de page).
  • L'en-tête et le pied de page occupent toute la largeur de la page, avec le contenu au centre, et la barre latérale et la publicité de chaque côté.

Avantages des grilles

Les avantages d'une grille comprennent les points suivants :.

  • Mise en page bidimensionnelle facile : gérer la mise en page à la fois en lignes et en colonnes permet de réaliser même des dispositions complexes avec moins de code.
  • Compatible avec le design responsive : le système de grille facilite la création de designs adaptatifs qui s'ajustent à différentes tailles d'écran.

Propriété gap 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

La propriété gap est utilisée dans les dispositions en grille et flexbox pour définir l'espacement (les écarts) entre les éléments. En utilisant cette propriété, vous pouvez facilement ajouter de l'espace entre les éléments enfants.

  • Dans la classe gap-grid-container, un espace de 30px verticalement et de 10px horizontalement est défini entre chaque élément. Étant donné qu'une grille à 3 colonnes est créée avec grid-template-columns, des écarts sont appliqués verticalement et horizontalement entre chaque élément. Dans la classe gap-flex-container, un espace de 50px est appliqué entre les trois éléments dans le flexbox.

Syntaxe de base 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • La propriété row-gap spécifie l'espace entre les lignes. Il s'agit de l'espacement vertical dans les dispositions de grille ou flexbox.
  • La propriété column-gap spécifie l'espace entre les colonnes. Il s'agit de l'espacement horizontal.

Si deux valeurs ne sont pas spécifiées, une seule valeur est appliquée à la fois à row-gap et column-gap.

Avantages de la propriété gap

Les avantages de la propriété gap incluent les éléments suivants :.

  • Réglage simple de l'espace : Le code pour définir les écarts entre les éléments enfants devient plus simple, éliminant le besoin de définir des marges ou des paddings supplémentaires entre les éléments.
  • Adaptation flexible : Elle prend facilement en charge le design responsive, permettant des ajustements de design flexibles.

Propriété grid-template-areas 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

La propriété grid-template-areas permet de nommer des zones dans un conteneur de grille et d'utiliser ces noms pour positionner facilement les éléments de la grille. L'utilisation de cette propriété permet des définitions de mise en page visuellement intuitives.

Les éléments positionnés dans les zones nommées définies par la propriété grid-template-areas doivent avoir le même nom attribué à l'aide de la propriété grid-area. Même si des éléments occupent plusieurs cellules, ils sont automatiquement positionnés correctement.

Dans cet exemple, la grille est créée comme suit :.

  • Dans la première ligne, "header" est placé sur deux colonnes.
  • "Sidebar" est placé à gauche et "content" à droite dans la deuxième ligne.
  • "Footer" est placé sur deux colonnes dans la troisième ligne.

Utilisation de base 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

Dans la propriété grid-template-areas, le nom de la zone est spécifié pour chaque ligne. En plaçant des éléments dans des zones nommées, vous pouvez créer facilement des mises en page. - Dans cet exemple, une grille avec 2 lignes et 3 colonnes est créée, et chaque cellule est nommée area1, area2, etc.

Définir des cellules vides en utilisant . 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

Si vous souhaitez avoir des cellules vides dans votre mise en page, vous pouvez représenter ces cellules vides à l'aide d'un . (point). - Comme dans cet exemple, en spécifiant un . entre sidebar et content, la deuxième colonne devient vide.

Avantages de la propriété grid-template-areas

Les avantages de la propriété grid-template-areas incluent les points suivants :.

  • Disposition visuelle : Elle permet de représenter visuellement la mise en page, ce qui rend le design plus facile à comprendre.
  • Mouvement facile des éléments : Vous pouvez facilement ajuster la disposition des éléments en modifiant les définitions des zones dans le CSS, sans modifier le HTML.

Notes

Lors de l'utilisation de la propriété grid-template-areas, il est important de prêter attention aux points suivants :.

  • Le nombre de noms dans chaque ligne doit correspondre au nombre de colonnes définies.
  • Attribuer le même nom à plusieurs cellules fusionnera ces cellules, mais lorsqu'elles sont assignées à différentes lignes ou colonnes, la zone doit être carrée.

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

inline-grid est l'une des valeurs de la propriété display en CSS. Appliquer cette propriété fait que l'élément se comporte comme un conteneur de niveau inline, créant un contexte de mise en page en grille à l'intérieur. Contrairement à display: grid, il se comporte comme un élément inline dans le flux du document.

Cas d'utilisation de inline-grid

inline-grid n'est pas aussi courant que grid, mais il peut être utilisé efficacement dans des scénarios spécifiques.

  • Grille dans un contexte inline : Utile lorsque vous souhaitez placer une grille à côté de contenu textuel ou d'autres éléments inline. Par exemple, cela est utile lorsqu'une structure en grille est nécessaire pour des boutons, badges, étiquettes, etc., tout en souhaitant les afficher inline sans perturber le flux du texte.

  • Contrôle de la mise en page dans des éléments inline : Même lorsque des mises en page complexes sont nécessaires dans des éléments inline comme les liens, boutons ou spans, inline-grid peut gérer la structure interne avec une mise en page en grille tout en évitant un affichage en bloc.

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

Dans ce cas, le bouton affiche des icônes et du texte dans une grille, tout en restant inline dans le flux du document.

  • Composants inline réactifs : inline-grid peut être utilisé pour de petits composants faisant partie du contenu inline et nécessitant une mise en page en grille. Par exemple, il convient pour des formulaires inline, badges, étiquettes de produits, etc., où vous voulez ajuster la mise en page avec une grille tout en la gardant inline.

Alignement et dimensionnement de inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • Comme les autres éléments inline, inline-grid respecte l'alignement vertical par rapport au contenu environnant. Vous pouvez contrôler l'alignement de la grille en utilisant la propriété vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • En ce qui concerne la taille, un élément inline-grid occupe uniquement la largeur requise par son contenu de grille. Si nécessaire, vous pouvez définir explicitement la largeur, la hauteur et les dimensions minimales/maximales.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

Il est également possible que la disposition de la grille elle-même détermine la taille du conteneur inline-grid, et cette tendance est plus forte lorsqu'on utilise des unités flexibles comme fr, auto et les pourcentages.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées à FlexboxPropriétés CSS liées à la mise en page en colonnes