Layout 3 colonnes responsive avec Flexbox

Créer un conteneur avec trois enfants occupant chacun un tiers de la largeur sur écrans larges (≥ 768 px) et se réorganisant en colonne unique sur mobile. HTML et CSS uniquement.

30 minPublié le 20 mai 2026Proposé par Anonyme

Défi

// Lisez attentivement, codez sur votre machine

Énoncé

Créer une page HTML + CSS composée d'un conteneur <div class="grille"> contenant trois <div class="colonne">. Sur les écrans dont la largeur est supérieure ou égale à 768 px, les trois colonnes s'affichent côte à côte, chacune occupant exactement un tiers de la largeur du conteneur. En dessous de 768 px, elles s'empilent verticalement (pleine largeur). Aucun JavaScript n'est autorisé.

Contraintes

Utiliser display: flex sur .grille.
Chaque .colonne doit avoir flex: 1 ou width: calc(100% / 3) (les deux approches sont acceptées).
La media query doit cibler max-width: 767px pour le mode mobile.
En mode mobile, les colonnes occupent width: 100% et flex-direction: column est activé sur le conteneur.
HTML5 + CSS3 uniquement, pas de JavaScript, pas de framework CSS.

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3 colonnes Flexbox</title>
  <style>
    .grille {
      display: flex;
      gap: 1rem;
    }

    .colonne {
      flex: 1;
      padding: 1rem;
      background-color: #e0e0e0;
      border: 1px solid #999;
    }

    @media (max-width: 767px) {
      .grille {
        flex-direction: column;
      }

      .colonne {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="grille">
    <div class="colonne">Colonne 1</div>
    <div class="colonne">Colonne 2</div>
    <div class="colonne">Colonne 3</div>
  </div>
</body>
</html>

Sur un écran ≥ 768 px, les trois blocs gris s'affichent côte à côte en occupant chacun un tiers. Sur mobile (< 768 px), ils s'empilent verticalement en pleine largeur.

Espace solution

Proposer une solution

Connectez-vous ou créez un compte pour envoyer votre code (aucune exécution côté serveur — on stocke juste le texte pour la communauté).

Se connecter Créer un compte

Défi précédentConvertir N secondes en HH:MM:SS Défi suivant Extraire le dernier chiffre d'un entier positif