Cours IT Bases CSS 031_Mise en page grille Grid

Mise en page grille Grid

Une grille est constituée d’une série de lignes horizontales et verticales formant un motif de mise en page. En se basant sur la grille, nous pouvons organiser les éléments de conception, nous aidant à concevoir une série de pages avec des éléments de position et de largeur fixes, rendant nos pages web plus uniformes.

Une grille comporte généralement de nombreuses colonnes (columns) et lignes (rows), ainsi que des espaces entre les lignes et les colonnes, cet espace est généralement appelé gouttière (gutter).

Effet de l'exemple

Concepts de base

La mise en page Grid est composée des concepts de base suivants :

Conteneur de grille (grid container) : La mise en page de grille est composée de conteneurs de grille et d’éléments de grille. Le conteneur de grille est le conteneur qui place les éléments de grille dans la grille. Le conteneur de grille peut être n’importe quel élément, mais généralement on utilise l’élément div.
Élément de grille (grid item) : Les éléments de grille sont des éléments placés dans le conteneur de grille. Les éléments de grille peuvent être n’importe quel élément, mais généralement on utilise des éléments div.
Ligne de grille (grid line) : Les lignes de grille sont les lignes qui divisent le conteneur de grille en lignes et colonnes. Les lignes de grille peuvent être horizontales ou verticales.
Colonne de grille (grid column) : Les colonnes de grille sont des lignes verticales dans le conteneur de grille.
Ligne de grille (grid row) : Les lignes de grille sont des lignes horizontales dans le conteneur de grille.

Propriétés courantes

Propriétés du conteneur de grille

Le conteneur de grille possède les propriétés suivantes pour contrôler la mise en page de grille :

display : Définit le mode d’affichage du conteneur de grille. Le conteneur de grille doit être défini sur display: grid ou display: inline-grid pour utiliser la mise en page de grille.
grid-template-columns : Définit le nombre de colonnes et les largeurs de colonnes du conteneur de grille (en utilisant des unités comme fr, px, em, etc.).
grid-template-rows : Définit le nombre de lignes et les hauteurs de lignes du conteneur de grille (en utilisant des unités comme fr, px, em, etc.).
grid-template : Définit simultanément grid-template-columns et grid-template-rows.
grid-auto-columns : Définit les largeurs de colonnes du conteneur de grille.
grid-auto-rows : Définit les hauteurs de lignes du conteneur de grille.

Propriétés des éléments de grille

Les éléments de grille possèdent les propriétés suivantes pour contrôler la mise en page des éléments de grille dans la grille :

grid-column : Définit la colonne dans laquelle se trouve l’élément de grille.
grid-row : Définit la ligne dans laquelle se trouve l’élément de grille.
grid-column-start : Définit la position de départ de l’élément de grille dans la colonne.
grid-column-end : Définit la position de fin de l’élément de grille dans la colonne.
grid-row-start : Définit la position de départ de l’élément de grille dans la ligne.
grid-row-end : Définit la position de fin de l’élément de grille dans la ligne.
grid-area : Définit la zone dans laquelle se trouve l’élément de grille.
grid-gap : Définit l’espacement entre les lignes de grille.

Mise en page grille

Définir des largeurs de colonnes et hauteurs de lignes fixes et adaptatives

Exemple :

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* Première colonne 100px, deuxième colonne 200px, espace restant alloué à la colonne adaptative */
5
    grid-template-rows: 100px 200px auto;
6
    /* Première ligne 100px, deuxième ligne 200px, espace restant alloué à la ligne adaptative */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Démonstration Grid</div>
3
        <div class="item">Démonstration Grid</div>
4
        <div class="item">Démonstration Grid</div>
5
        <div class="item">Démonstration Grid</div>
6
        <div class="item">Démonstration Grid</div>
7
        <div class="item">Démonstration Grid</div>
8
        <div class="item">Démonstration Grid</div>
9
        <div class="item">Démonstration Grid</div>
10
        <div class="item">Démonstration Grid</div>
11
    </div>

Effet :

Effet de l'exemple Utilisation de pourcentages pour définir les largeurs de colonnes et hauteurs de lignes

Exemple :

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* Première colonne occupe 30%, deuxième colonne occupe deux parts de l'espace restant, troisième colonne occupe une part de l'espace restant */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* Première ligne occupe 30%, deuxième ligne occupe deux parts de l'espace restant, troisième ligne occupe une part de l'espace restant */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Démonstration Grid</div>
3
        <div class="item">Démonstration Grid</div>
4
        <div class="item">Démonstration Grid</div>
5
        <div class="item">Démonstration Grid</div>
6
        <div class="item">Démonstration Grid</div>
7
        <div class="item">Démonstration Grid</div>
8
        <div class="item">Démonstration Grid</div>
9
        <div class="item">Démonstration Grid</div>
10
        <div class="item">Démonstration Grid</div>
11
    </div>

Effet :

Effet de l'exemple Division égale (répartition moyenne) des largeurs de colonnes et hauteurs de lignes

Exemple :

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Trois colonnes égales, chaque colonne occupe une part de l'espace restant */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* Trois lignes égales, chaque ligne occupe une part de l'espace restant */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Démonstration Grid</div>
3
        <div class="item">Démonstration Grid</div>
4
        <div class="item">Démonstration Grid</div>
5
        <div class="item">Démonstration Grid</div>
6
        <div class="item">Démonstration Grid</div>
7
        <div class="item">Démonstration Grid</div>
8
        <div class="item">Démonstration Grid</div>
9
        <div class="item">Démonstration Grid</div>
10
        <div class="item">Démonstration Grid</div>
11
    </div>

Effet :

Effet de l'exemple Utilisation de minmax pour définir la largeur et hauteur minimales et maximales des colonnes et lignes

Exemple :

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* Première colonne largeur minimale 100px, occupe une part de l'espace restant ; deuxième colonne largeur minimale 200px, occupe deux parts de l'espace restant */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* Première ligne hauteur minimale 100px, occupe une part de l'espace restant ; deuxième ligne hauteur minimale 200px, occupe deux parts de l'espace restant */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Démonstration Grid</div>
3
        <div class="item">Démonstration Grid</div>
4
        <div class="item">Démonstration Grid</div>
5
        <div class="item">Démonstration Grid</div>
6
    </div>

Effet :

Effet de l'exemple

Espacement de grille

L’espacement de grille est contrôlé par les deux propriétés grid-row-gap et grid-column-gap. De plus, CSS Grid Level 2 a introduit la propriété gap, qui peut contrôler simultanément grid-row-gap et grid-column-gap.

Exemple :

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* Espacement de lignes de 50px */
6
    grid-column-gap: 30px; /* Espacement de colonnes de 30px */
7
    /* gap: 50px 30px; Espacement de lignes de 50px, espacement de colonnes de 30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Démonstration Grid</div>
3
        <div class="item">Démonstration Grid</div>
4
        <div class="item">Démonstration Grid</div>
5
        <div class="item">Démonstration Grid</div>
6
        <div class="item">Démonstration Grid</div>
7
        <div class="item">Démonstration Grid</div>
8
    </div>

Effet :

Effet de l'exemple

Positionnement de grille

Le positionnement de grille fait généralement référence à l’utilisation de propriétés telles que grid-column, grid-row et grid-area pour positionner les éléments dans la mise en page de grille. Ces propriétés sont utilisées pour spécifier les colonnes et les lignes qu’un élément occupe dans la grille, ou pour spécifier directement la zone dans laquelle se trouve l’élément.

grid-column est une propriété pour définir les colonnes qu’un élément de grille chevauche. C’est une abréviation de grid-column-start et grid-column-end. Avec grid-column, vous pouvez définir plus facilement la position et le nombre de colonnes qu’un élément de grille chevauche dans la direction horizontale.
grid-row est une propriété pour définir les lignes qu’un élément de grille chevauche. C’est une abréviation de grid-row-start et grid-row-end. Avec grid-row, vous pouvez définir plus facilement la position et le nombre de lignes qu’un élément de grille chevauche dans la direction verticale.
La propriété grid-area est une propriété abrégée pour définir simultanément les propriétés grid-row-start, grid-column-start, grid-row-end et grid-column-end. Avec grid-area, vous pouvez définir de manière plus intuitive la position et la taille d’un élément de grille dans la mise en page de grille.

Exemple :

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Définit 3 colonnes, chaque colonne occupe 1 part d'espace */
5
    grid-template-rows: repeat(2, 150px);
6
    /* Définit 2 lignes, chaque ligne a une hauteur de 150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* Positionnement avec grid-column et grid-row */
17
.item1 {
18
    grid-column: 1 / 3; /* De la colonne 1 à la colonne 3 (1+2 colonnes) */
19
    grid-row: 1 / 2;    /* De la ligne 1 à la ligne 2 (1 ligne) */
20
}
21
/* Positionnement avec grid-area */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* De la ligne 2, colonne 2 à la ligne 3, colonne 4 (2 lignes) (2+3 colonnes) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

Effet :

Effet de l'exemple

Exemple :

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* Définit deux colonnes, première colonne occupe une part, deuxième colonne occupe deux parts */
10
    grid-template-rows: auto;
11
    /* Définit hauteur de ligne, première et troisième ligne hauteur déterminée par contenu, deuxième ligne occupe espace restant */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* Définit mise en page des zones, chaque zone représentée par une chaîne, espaces séparent cellules, saut de ligne représente nouvelle ligne */
17
    min-height: 100vh;
18
    /* Définit hauteur minimale, garantit que le footer reste visible même lorsque la hauteur du contenu est inférieure au viewport */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* Place .header dans la zone nommée "header" */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* Place .sidebar dans la zone nommée "sidebar" */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* Place .main dans la zone nommée "main" */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* Place .footer dans la zone nommée "footer" */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

Effet :

Effet de l'exemple

Mise en page grille Grid

Concepts de base

Propriétés courantes

Mise en page grille

Espacement de grille

Positionnement de grille

Commentaires