Layout 3 colonnes responsive avec Flexbox

É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

À vérifier dans un navigateur en faisant varier la largeur de la fenêtre :

• au-dessus de 768 px, les trois blocs sont côte à côte et occupent chacun le tiers de la largeur du conteneur, sans débordement horizontal ;
• en dessous de 768 px, les trois blocs sont empilés, chacun sur toute la largeur ;
• le basculement se fait exactement à 768 px, sans palier intermédiaire.