4.1
Grille de cartes responsive
Adaptation automatique du nombre de colonnes
⏱ 15 min
SOLUTION CSS
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* auto-fit : crée autant de colonnes que possible */
/* minmax(200px, 1fr) : min 200px, max 1 fraction */
gap: 20px;
}
.grid-cards .card {
padding: 20px;
background: #f5f5f5;
border-radius: 8px;
}
RENDU EN DIRECT
Carte 1
Carte 2
Carte 3
Carte 4
Carte 5
Carte 6
4.2
Layout complet avec Grid Areas
header / sidebar / main / footer
⏱ 15 min
SOLUTION CSS
.page-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 0;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
RENDU EN DIRECT
⊞ Header
📄 Contenu principal