6. Mise en Page CSS : Flexbox et Grid

Flexbox et Grid sont deux systèmes modernes de mise en page CSS qui facilitent la création de structures flexibles, adaptatives et complexes.

Flexbox

Flexbox organise les éléments en une seule dimension (ligne ou colonne) et offre un contrôle facile de l'alignement, de la distribution de l'espace, et de l'ordre.

Grid

Grid permet de créer des mises en page en deux dimensions (lignes et colonnes), très puissantes pour construire des designs complexes et responsives.

Exemple basique Flexbox

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
    

Exemple basique Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}