Formation CSS Grid & Flexbox
| € HT / personne |
| 2 jours (14 heures) |
Présentation
CSS Grid & Flexbox sont des outils modernes et complémentaires pour structurer des mises en page web flexibles et performantes.
Alors que Flexbox permet de gérer facilement des dispositions unidimensionnelles (en ligne ou en colonne), Grid offre un contrôle précis sur les deux axes (lignes et colonnes) : idéal pour des mises en page complexes et adaptatives.
Cette formation web sur 2 jours, destinée aux développeurs, alterne théorie, études de cas et exercices pratiques.
Objectifs
- Maîtriser les bases et propriétés avancées de Flexbox
- Concevoir des grilles complexes et responsives avec CSS Grid
- Savoir combiner Flexbox et Grid pour optimiser les layouts
- Produire des interfaces adaptatives, accessibles, et faciles à maintenir
Public visé
- Développeurs frontend souhaitant structurer des interfaces modernes
- Professionnels HTML/CSS familiers voulant maîtriser Grid et Flexbox
Pré-requis
- Connaissances de base en HTML et CSS
- Expérience préalable de mise en page web souhaitée
Programme de la formation CSS Grid & Flexbox
Principes de Flexbox et containers flexibles
- Introduction à Flexbox, conteneur vs items
- Propriétés du conteneur : display: flex, flex-direction, flex-wrap, gap
- Alignement : justify-content, align-items, align-content, align-self
- Sizing flexible : flex-grow, flex-shrink, flex-basis, shorthand
- Spécificités et cas du contenu unidimensionnel
Cas d’usage concrets en interface
- Mise en page d’un menu de navigation ou galerie horizontale
- Répartition automatique des espaces et repli responsif
- Réordonner des items via order
- Utilisation dans des composants UI modernes (cards, barres d’outils…)
- Atelier : créer une barre de navigation responsive avec alignement flexible
CSS Grid — concepts de base
- Introduction à CSS Grid, comparaison avec Flexbox (2‑dimensions vs 1‑dimension)
- Définition de grilles : grid-template-columns/rows, gap, grid-template-areas
- Placement explicite (grid lines, areas) et auto-placement
- Alignement dans la grille : justify-items, align-items, justify-content, align-content
- Unités modernes : fr, minmax(), repeat()
Mises en pratique avec Grid
- Création de layouts complexes : zones header, sidebar, main, footer
- Utilisation de subgrid, zones nommées, et responsive via media queries
- Gestion de l’ordre et de l’empilement (overlap, layering)
Intégration Flexbox dans Grid et mix
- Quand utiliser Flexbox à l’intérieur d’un item Grid et pourquoi
- Combinaison layout-first (Grid) + content-first (Flexbox)
- Exemples avancés de design UI responsive
Optimisation et bonnes pratiques
- Support navigateur et rétrocompatibilité pour anciens navigateurs
- Accessibilité et navigation clavier
- Débogage via les outils dev (grid overlay, flex inspector)
- Performance, maintenance CSS, clarté du code
- Atelier : bâtir une page d’accueil responsive combinant une grille principale et des composants Flexbox à l’intérieur
Pour aller plus loin
Formation Angular
Formation Ionic
Formation Firebase avec Angularfire
Formation Redux et RxJS
Formation MEAN Stack
Formation D3.js
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Nos Formateurs Référents
Témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Afficher tous les témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Noter la formation
| € HT / personne |
| 2 jours (14 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
