CSS Grid Layout — Correction d'exercices

Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.

#1 — Définition de colonnes

Crée une grille avec 3 colonnes de largeur égale (1fr chacune).

Voir le corrigé

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

Ajoute un espace de 20px entre toutes les lignes et colonnes de la grille.

Voir le corrigé

.grid {
    gap: 20px;
}

Fais en sorte qu'un élément occupe 2 colonnes.

Voir le corrigé

.item {
    grid-column: span 2;
}

Définis une hauteur automatique pour les lignes de la grille.

Voir le corrigé

.grid {
    grid-template-rows: auto;
}

Centre le contenu à la fois horizontalement et verticalement dans chaque cellule.

Voir le corrigé

.grid {
    place-items: center;
}