[ Nexter ]
[ Le Projet ]
Maîtriser CSS Grid
Une landing page immobilière de 8 sections, entièrement construite avec CSS Grid. Une grille principale gère le layout global et chaque section possède sa propre sous-grille. Le tout sans framework et sans Flexbox.
Contexte
Formation "Advanced CSS and Sass" par Jonas Schmedtmann
Objectif
Maîtriser CSS Grid pour des layouts complexes et responsive
[ Le Défi ]
Tout en CSS Grid
Le site entier repose sur CSS Grid — pas seulement la galerie. Une grille principale structure la page, tandis que chaque section gère sa propre sous-grille indépendante.
[ Solution ]
Comment j'ai procédé
Une grille principale orchestre le layout global de la page, tandis que chaque section gère sa propre sous-grille indépendante.
Cette combinaison de auto-fit et minmax() permet un comportement responsive naturel avec un minimum de media queries.
[ Résultat ]
Ce que j'en retiens
Ce projet m'a permis de comprendre en profondeur le système de grilles CSS et d'adopter une approche plus maintenable pour mes futurs projets front-end.
Positionnement
- Grid avancé
- Placement explicite
- Zones nommées
Architecture
- SCSS modulaire
- Méthodologie BEM
- Variables CSS
Optimisation
- SVG sprites
- Build NPM
- CSS minifié
[ Crédits ]
Ce projet a été réalisé dans le cadre du cours Advanced CSS and Sass: Flexbox, Grid, Animations and More! par Jonas Schmedtmann. Le design original et le concept sont de Jonas — j'ai effectué l'intégration complète en suivant la formation.