Flexbox et CSS Grid : la mise en page

Flexbox et Grid sont les deux systèmes de mise en page du CSS moderne : Flexbox aligne et répartit des éléments sur une seule dimension, une ligne ou une colonne ; Grid les place sur deux dimensions, en lignes et en colonnes à la fois. Ce chapitre explique les propriétés de chacun avec des exemples tirés du site de la médiathèque (menu, cartes, mise en page complète), et comment choisir entre les deux.

Flexbox ou Grid : lequel choisir ?

Les deux ne s'opposent pas : on les combine. Grid pour la structure de la page et la grille de cartes ; Flexbox à l'intérieur de chaque carte et dans le menu. Une règle simple : si tu as besoin que des éléments s'alignent aussi d'une rangée à l'autre, c'est Grid ; s'ils doivent juste se suivre sur une ligne, c'est Flexbox.

Flexbox : le conteneur et ses éléments

On active Flexbox sur le conteneur ; ses enfants directs deviennent des éléments flexibles (flex items).

<ul class="menu">
  <li><a href="index.html">Accueil</a></li>
  <li><a href="agenda.html">Agenda</a></li>
  <li><a href="catalogue.html">Catalogue</a></li>
</ul>

.menu {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

Les trois éléments se placent côte à côte, espacés de 1rem. Flexbox raisonne avec deux axes :

• l'axe principal (main axis), celui dans lequel les éléments se suivent : horizontal par défaut ;
• l'axe secondaire (cross axis), perpendiculaire.

Toutes les propriétés d'alignement de Flexbox se rapportent à ces axes : justify-content agit le long de l'axe principal, align-items sur l'axe secondaire. Change la direction, et les deux propriétés changent de sens à l'écran.

flex-direction et flex-wrap

Par défaut (nowrap), Flexbox comprime les éléments pour tout faire tenir sur une ligne, quitte à les écraser. Avec flex-wrap: wrap, ils passent à la ligne suivante : c'est ce qu'il faut pour une rangée d'étiquettes ou de boutons de filtre.

justify-content et align-items

justify-content répartit les éléments le long de l'axe principal :

align-items les aligne sur l'axe secondaire :

Un élément peut déroger à align-items avec align-self. Et une margin: auto dans un conteneur flex absorbe tout l'espace libre de ce côté : margin-left: auto pousse un élément, et ceux qui le suivent, tout à droite.

gap : espacer les éléments

gap fixe l'espace entre les éléments, jamais avant le premier ni après le dernier. C'est plus simple et plus juste que des marges, qui laissent toujours une marge en trop au bout de la rangée. Avec deux valeurs, gap: 1rem 2rem règle l'espace entre lignes, puis entre colonnes. gap fonctionne en Flexbox comme en Grid.

flex-grow, flex-shrink et flex-basis

Trois propriétés, posées sur les éléments, règlent leur taille :

On les écrit presque toujours avec le raccourci flex :

/* Un champ de recherche qui prend toute la place à côté de son bouton */
.recherche {
  display: flex;
  gap: 0.5rem;
}

.recherche input {
  flex: 1;
  min-width: 0;   /* voir l'encadré */
}

.recherche button {
  flex: none;
}

Calcul : un conteneur de 600 px contient deux éléments de flex-basis 100 px et 200 px, avec un gap de 20 px. L'espace libre vaut 600 − 100 − 200 − 20 = 280 px. Avec flex-grow: 1 et flex-grow: 3, le premier reçoit 280 × 1/4 = 70 px (il fait 170 px), le second 280 × 3/4 = 210 px (il fait 410 px).

Exemple : une barre de navigation en Flexbox

<header class="entete">
  <a href="index.html" class="logo"><img src="images/logo.svg" alt="Médiathèque des Tilleuls – accueil" width="180" height="48"></a>
  <nav aria-label="Menu principal">
    <ul class="menu">
      <li><a href="agenda.html">Agenda</a></li>
      <li><a href="catalogue.html">Catalogue</a></li>
      <li><a href="infos.html">Infos pratiques</a></li>
    </ul>
  </nav>
  <a href="compte.html" class="bouton">Mon compte</a>
</header>

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;       /* logo, menu et bouton centrés verticalement */
  gap: 1rem 2rem;
  padding: 0.75rem 1rem;
}

.entete nav {
  margin-left: auto;         /* pousse le menu et le bouton à droite */
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  display: inline-block;
  padding: 0.5rem 0.25rem;
}

Deux conteneurs flex imbriqués : l'en-tête place ses trois enfants (logo, nav, bouton), et la liste du menu place ses <li>. Grâce à flex-wrap: wrap, sur un écran étroit, le menu passe sous le logo au lieu de déborder.

Exemple : une carte dont le bouton reste en bas

Dans une rangée de cartes, les textes ont des longueurs différentes : on veut que les boutons « S'inscrire » s'alignent quand même en bas.

.carte {
  display: flex;
  flex-direction: column;    /* image, titre, texte et bouton empilés */
  gap: 0.5rem;
}

.carte .bouton {
  margin-top: auto;          /* absorbe l'espace libre au-dessus : le bouton descend en bas */
  align-self: flex-start;    /* le bouton garde sa largeur au lieu de s'étirer */
}

Les cartes ont la même hauteur grâce au stretch par défaut de leur conteneur (Flexbox ou Grid) ; margin-top: auto fait le reste.

CSS Grid : lignes, colonnes et unité fr

On active Grid sur le conteneur, puis on décrit ses pistes (tracks), colonnes et lignes :

.galerie {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  gap: 1rem;
}

L'unité fr (fraction) partage l'espace restant. Dans un conteneur de 800 px, avec un gap de 1rem (16 px) entre les trois colonnes : l'espace restant vaut 800 − 200 − 2 × 16 = 568 px, réparti en trois fractions de 189,33 px ; la deuxième colonne en prend une, la troisième deux (378,67 px).

Il n'est pas nécessaire de décrire les lignes : Grid en crée autant qu'il faut pour placer tous les éléments (les lignes implicites), chacune à la hauteur de son contenu le plus grand.

Placer les éléments dans la grille

Par défaut, les éléments remplissent les cellules dans l'ordre, ligne par ligne. Pour en placer un précisément, on utilise les numéros de lignes de grille : une grille de 3 colonnes a 4 lignes verticales, numérotées de 1 à 4 (et de −1 à −4 en partant de la fin).

.mise-en-avant {
  grid-column: 1 / 3;        /* de la ligne 1 à la ligne 3 : deux colonnes */
}

.bandeau {
  grid-column: 1 / -1;       /* de la première à la dernière ligne : toute la largeur */
}

.grande-carte {
  grid-column: span 2;       /* occupe deux colonnes, là où elle tombe */
  grid-row: span 2;          /* et deux lignes */
}

grid-template-areas : dessiner la mise en page

Pour la structure d'une page, la façon la plus lisible est de nommer des zones et de dessiner la grille en texte :

body {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "entete  entete"
    "lateral contenu"
    "pied    pied";
  min-height: 100dvh;
  gap: 1rem;
}

body > header { grid-area: entete; }
body > aside  { grid-area: lateral; }
body > main   { grid-area: contenu; }
body > footer { grid-area: pied; }

Chaque chaîne est une ligne de la grille, chaque mot une cellule. Un nom répété sur plusieurs cellules adjacentes crée une zone qui les couvre (elle doit rester rectangulaire) ; un point . laisse une cellule vide. Avec grid-template-rows: auto 1fr auto et min-height: 100dvh, le pied de page reste en bas de la fenêtre même quand le contenu est court.

L'intérêt devient évident sur mobile : il suffit de redessiner la grille dans une media query (chapitre 10), sans toucher au HTML.

@media (width < 48rem) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "entete"
      "contenu"
      "lateral"
      "pied";
  }
}

Une grille de cartes responsive sans media query

.grille-ateliers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem;
}

Cette ligne, à connaître par cœur, dit : « mets autant de colonnes d'au moins 16rem que la largeur le permet, et partage l'espace restant entre elles ». Sur un téléphone, une colonne ; sur une tablette, deux ; sur un grand écran, quatre ou cinq. Aucune media query n'est nécessaire.

subgrid : aligner l'intérieur des cartes

Dans une grille de cartes, chaque carte est une grille indépendante : les titres de longueurs différentes décalent les textes d'une carte à l'autre. Avec subgrid, reconnu par tous les navigateurs actuels depuis 2023, une carte réutilise les lignes de la grille parente :

.grille-ateliers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.grille-ateliers .carte {
  display: grid;
  grid-row: span 3;                /* titre, description, bouton */
  grid-template-rows: subgrid;     /* les mêmes lignes que les cartes voisines */
}

Les titres, les descriptions et les boutons de toutes les cartes d'une même rangée s'alignent alors entre eux.

Exercices

.grille {
  display: grid;
  grid-template-columns: 10rem 1fr 1fr;
  gap: 1rem;
}
.a { grid-column: 2 / 4; }
.b { grid-column: 1 / -1; }

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "entete"
    "contenu"
    "lateral"
    "pied";
  gap: 1.5rem;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto auto;
}

@media (width >= 48rem) {
  body {
    grid-template-columns: 1fr 18rem;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "entete  entete"
      "contenu lateral"
      "pied    pied";
  }
}

body > header { grid-area: entete; }
body > main   { grid-area: contenu; }
body > aside  { grid-area: lateral; }
body > footer { grid-area: pied; }