Créer une grille avec CSS Grid

Une page peut contenir plusieurs informations qui doivent rester faciles à parcourir : horaires, conseils et coordonnées. Sans organisation, les blocs s’empilent ou prennent une place disproportionnée. CSS Grid vous permet de les disposer sur des lignes et des colonnes, puis de contrôler précisément l’espace attribué à chacun.

Vous avez déjà appris à cibler les éléments d’une page avec des sélecteurs de type, de classe, d’identifiant et de descendant. Vous allez maintenant appliquer ces règles à une grille, en réutilisant la page de présentation de l’atelier de jardinage.

Définir la grille sur le conteneur

Une grille se crée sur un élément parent : la déclaration display: grid transforme cet élément en conteneur de grille. Ses enfants directs deviennent des éléments de grille et sont répartis dans les cellules disponibles. Une piste désigne une colonne ou une ligne de cette grille ; les propriétés grid-template-columns et grid-template-rows servent à en définir les dimensions.

Dans le projet, vous pouvez placer les horaires à gauche et les conseils pratiques à droite, puis réserver une ligne à la présentation et une autre au contact. Voici une page complète : la classe page reçoit la grille, tandis que les classes presentation, horaires, conseils et contact permettront de placer les blocs.

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Atelier de jardinage</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page">
        <div class="presentation">
            <h1>Atelier de jardinage</h1>
            <p>Apprenez à cultiver un jardin vivant, saison après saison.</p>
        </div>
        <div class="horaires">
            <h2>Horaires</h2>
            <p>Samedi, de 9 h à 12 h</p>
        </div>
        <div class="conseils">
            <h2>Conseils pratiques</h2>
            <p>Apportez des gants et un carnet pour noter vos observations.</p>
        </div>
        <div class="contact">
            <h2>Contact</h2>
            <p><a href="mailto:[email protected]">[email protected]</a></p>
        </div>
    </div>
</body>
</html>

Dans la feuille style.css, déclarez deux colonnes et deux lignes. La valeur 1fr signifie qu’une piste reçoit une fraction de l’espace disponible ; deux colonnes 1fr ont donc la même largeur. La fonction repeat(2, 1fr) produit ici ces deux pistes égales sans répéter leur valeur à la main.

:root {
    --couleur-fond: #f2f5ed;
    --couleur-carte: #ffffff;
    --couleur-texte: #263629;
    --espacement: 1.5rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: var(--espacement);
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: Arial, sans-serif;
}

.page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    gap: var(--espacement);
    max-width: 60rem;
    margin: 0 auto;
}

.page > div {
    padding: var(--espacement);
    background-color: var(--couleur-carte);
    border: 1px solid #cbd5c9;
}

.presentation {
    grid-column: 1 / 3;
}

.horaires {
    grid-column: 1;
    grid-row: 2;
}

.conseils {
    grid-column: 2;
    grid-row: 2;
}

.contact {
    grid-column: 1 / 3;
    grid-row: 3;
}

La règle gap ajoute un espace entre les pistes sans que vous ayez à ajouter des marges à chaque carte. La première ligne, grid-template-rows: auto auto auto, crée trois lignes dont la hauteur s’ajuste à leur contenu. Vous pouvez également laisser le navigateur créer implicitement les lignes nécessaires ; les déclarer est utile ici pour rendre la structure souhaitée explicite.

Placer les blocs sur les pistes

Par défaut, les éléments de grille sont placés dans les cellules dans l’ordre du document. Les propriétés grid-column et grid-row permettent de préciser leur emplacement. Les lignes de la grille se numérotent à partir de 1 : grid-column: 1 / 3 signifie que l’élément commence à la ligne verticale 1 et s’étend jusqu’à la ligne verticale 3, donc sur les deux colonnes.

Dans l’exemple, la présentation et le contact occupent toute la largeur. Les horaires et les conseils occupent chacun une colonne de la deuxième ligne. Les valeurs explicites évitent de dépendre du placement automatique : si vous changez l’ordre des blocs dans le HTML, leurs coordonnées restent définies par les règles CSS.

Vérifier le résultat

Enregistrez le document sous index.html et les règles sous style.css, dans le même dossier, puis ouvrez la page dans un navigateur. Vous devez voir la présentation en haut sur toute la largeur, les deux blocs horaires et conseils côte à côte, puis le contact sur toute la largeur en dessous. Si vous remplacez grid-column: 1 / 3 par grid-column: 1 sur la présentation, elle n’occupe plus les deux colonnes : cette modification vous permet de vérifier concrètement l’effet du placement.

À retenir

• Activez une grille sur le parent avec display: grid.
• Définissez les pistes avec grid-template-columns et grid-template-rows ; fr répartit l’espace disponible.
• Utilisez gap pour espacer les pistes.
• Placez les enfants directs avec grid-column et grid-row, en comptant les lignes de la grille à partir de 1.

Vous pouvez maintenant choisir une grille pour structurer des zones en lignes et colonnes ; la leçon suivante abordera l’adaptation de la mise en page aux différentes largeurs d’écran.