Grid
Cours · CSS : mettre en forme le Web (école d'ingénieur), chapitre 8 · école d'ingénieur, informatique · le début du chapitre, la suite sur Adloun
Au chapitre précédent, Flexbox a rangé l'en-tête de la Librairie du Campus : le nom à gauche, les liens à droite, le tout sur une ligne qui passe à la ligne quand la place manque. Flexbox pense en une dimension : une rangée (ou une colonne) d'éléments, qui se partagent la place.
Le catalogue, lui, est un problème à deux dimensions. On veut des cartes rangées en colonnes et en rangées, toutes de la même largeur, alignées verticalement comme horizontalement, et autant de colonnes que l'écran en permet. On veut aussi découper la page d'accueil en zones : le titre en haut, les nouveautés à gauche, les services à droite. C'est le travail de CSS Grid, le mode de mise en page en grille.
Objectifs du chapitre
- Créer une grille avec
display: gridet définir ses pistes avecgrid-template-columnsetgrid-template-rows. - Calculer la taille des pistes en
px, enfr, avecgap,repeat()etminmax(). - Placer un élément par les numéros de lignes, avec
span, ou par des zones nommées (grid-template-areas). - Faire une grille qui choisit elle-même son nombre de colonnes (
auto-fill,auto-fit). - Aligner les éléments dans leurs cellules ; aligner les cartes entre elles avec
subgrid. - Choisir entre Grid et Flexbox.
La suite du cours est sur Adloun
Le chapitre en entier, formules et figures comprises, avec le tuteur, les fiches, les QCM et les exercices.
Lire la suite du coursEn accès libre, sans inscription.