Conférence 15 : Grille CSS – Création de mises en page complexes en toute simplicité

Dans cette conférence, nous plongeons dans CSS Grid, un système de mise en page puissant qui vous donne un contrôle total sur les lignes et les colonnes. Alors que Flexbox est idéal pour les mises en page unidimensionnelles (lignes ou colonnes), Grid vous permet de gérer des mises en page bidimensionnelles, ce qui signifie que vous pouvez concevoir des mises en page entières de pages Web avec précision.

1. Qu'est-ce que la grille CSS ?

CSS Grid Layout, communément appelé Grid, est un système de mise en page 2D conçu pour gérer simultanément les lignes et les colonnes. Vous pouvez le considérer comme une matrice ou une feuille de calcul où chaque élément est placé dans des cellules de grille, permettant des mises en page propres et organisées.

2. Comment créer une grille

Pour commencer à utiliser Grid, vous devrez définir un conteneur comme une grille en définissant display: grid. Ensuite, vous définirez le nombre de lignes et de colonnes à l’aide des propriétés grid-template-rows et grid-template-columns.

Exemple:

    
1
    
2
    
3
    
4

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

Cela crée une grille 2x2, chaque cellule mesurant 100 px sur 100 px et un espace de 10 px entre les cellules.

3. Définir des zones de grille

Vous pouvez également définir des zones de grille spécifiques que les éléments doivent occuper à l'aide de la propriété grid-area. Cela vous permet de contrôler exactement où un élément sera placé dans la grille.

Exemple:

    
Header
    
Sidebar
    
Main Content
    
Footer

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

Cet exemple crée une mise en page de base dans laquelle l'en-tête et le pied de page s'étendent sur deux colonnes, et la barre latérale et le contenu principal occupent leurs propres colonnes. La propriété grid-template-areas vous permet de définir la structure de la grille avec des noms pour chaque zone.

4. Ajustement automatique et remplissage automatique pour les grilles réactives

L'un des meilleurs aspects de CSS Grid est la facilité avec laquelle il est possible de le rendre réactif. Les propriétés d'ajustement automatique et de remplissage automatique peuvent ajuster automatiquement le nombre de colonnes en fonction de l'espace disponible.

Exemple:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

Dans cet exemple, la grille créera automatiquement autant de colonnes que le conteneur peut contenir, chaque colonne ayant une largeur d'au moins 150 px. S'il y a de l'espace supplémentaire, les colonnes s'étireront pour remplir la zone restante.

5. Alignement de la grille

Vous pouvez aligner les éléments à l'intérieur de la grille en utilisant justify-items et align-items.

• justify-items : aligne les éléments horizontalement dans leurs cellules de grille.
• align-items : aligne les éléments verticalement dans leurs cellules de grille.

Exemple:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

Cela centrera tous les éléments horizontalement et verticalement dans leurs cellules de grille.

6. Grilles imbriquées

CSS Grid prend également en charge les grilles imbriquées, vous permettant de créer des grilles à l'intérieur d'éléments de grille pour des mises en page plus complexes.

Exemple:

    

        

            
Nested 1
            
Nested 2
        
    
    
Item 2
    
Item 3

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

Dans cet exemple, l'un des éléments de la grille contient une grille imbriquée, permettant des mises en page plus flexibles et plus détaillées.

7. Grid vs Flexbox : quand les utiliser ?

• Utilisez Flexbox lorsque vous devez gérer la disposition des éléments dans une direction (lignes ou colonnes).
• Utilisez Grille lorsque vous devez gérer simultanément des lignes et des colonnes pour des mises en page complexes et multidimensionnelles.

Conclusion

CSS Grid change la donne en matière de conception Web, offrant un moyen puissant de créer des mises en page complexes et réactives avec un minimum d'effort. Que vous travailliez sur la mise en page d'un blog, sur un tableau de bord ou sur la structure d'un site Web, Grid vous offre la possibilité de contrôler facilement les lignes et les colonnes.

suivez-moi sur LinkedIn

Ridoy Hasan