Mémo
display: grid;
// Défini le mode d'affichage en grid
grid-template-columns:
repeat(1, 1fr) |
50% 50% |
3fr 9fr ;
// Défini les colonnes de la grille
grid-templates-rows:
repeat(1, 1fr) |
50% 50% |
3fr 9fr ;
// Défini les lignes de la grille
column-gap: 1rem;
// Défini l'espace entre les colonnnes
row-gap: 1rem;
// Défini l'espacement entre les lignes
gap: 1rem;
// Défini l'espacement entre les colonnes et les lignes
grid-column: 1 / span 2;
// Défini que l'élément prend 2 colonnes à partir de la première
grid-row: 1 / span 2;
// Défini que l'élément prend 2 lignes à partir de la première
1️⃣ Créez une grille
Reproduisez la grille du résultat attendu.
🎯 Résultat attendu
