Le reste de la formation est réservé aux inscrits.
S'inscrire gratuitement.page {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 150px;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
Les areas rendent le layout VISUEL dans le code. On voit la structure directement. Puissant et lisible.
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Cette ligne magique crée automatiquement autant de colonnes que possible, chaque colonne faisant au minimum 250px et se partageant l'espace. Les cartes passent de 4 à 2 à 1 colonne toutes seules.
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }. La galerie s'adapte à toutes les largeurs d'écran. 0 media query.