Les bases de Grid

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 31 sur 43.

CSS Grid est un système de mise en page qui vous permet de créer facilement des pages web avec des lignes et des colonnes. C'est idéal pour construire des mises en page complexes et réactives sans avoir besoin de flottants ou de positionnements complexes. De plus, il fonctionne dans tous les navigateurs modernes.

Pour créer un conteneur de grille, utilisez la propriété display :

.container {
  display: grid;
}

Définissez les colonnes de votre grille en utilisant grid-template-columns avec des unités px ou fr (fractions) :

/* Cela crée trois colonnes où la colonne du milieu occupe deux fois plus d'espace que les deux autres. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Définissez des lignes avec grid-template-rows. Utilisez la propriété gap pour ajouter de l'espace entre les éléments de la grille.

/* Crée une grille avec deux lignes : la première fait 100px de haut, la seconde fait 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une règle CSS pour une classe nommée grid-container qui :

Définit la propriété display pour créer une grille
Crée trois colonnes de largeur égale en utilisant l'unité fr
Crée deux lignes : la première de 150px de haut et la seconde de 250px de haut
Ajoute un espacement (gap) de 20px entre tous les éléments de la grille

Écrivez uniquement le code CSS pour la classe grid-container.

Aide-mémoire

CSS Grid est un système de mise en page pour créer des pages web avec des lignes et des colonnes. Pour créer un conteneur de grille, utilisez display: grid :

.container {
  display: grid;
}

Définissez des colonnes en utilisant grid-template-columns avec des unités px ou fr (fractions) :

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Trois colonnes, celle du milieu est deux fois plus large */
}

Définissez des lignes avec grid-template-rows et ajoutez de l'espacement avec gap :

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Deux lignes avec des hauteurs spécifiques */
  gap: 20px; /* Espace entre les éléments de la grille */
}

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.