🏆 Challenge #N8 · Grid HTML · challenges/N8_grid.html CSS · challenges/css/N8_grid.css


À faire

  • À faire
  • Terminé
  • En cours
  • Incomplet
  • Blocage

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

Résultat attendu