Organiser une mise en page moderne

Deux outils CSS sont devenus essentiels pour construire des interfaces modernes : Flexbox et Grid.

Flexbox

Flexbox aligne des éléments sur un axe principal. C’est idéal pour une barre de navigation, un groupe de boutons ou une rangée de cartes.

.menu {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

Grid

Grid permet de construire une grille en lignes et colonnes. C’est parfait pour une galerie, un tableau de cartes ou la structure globale d’une page.

.grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Responsive design

@media (max-width: 768px) {
  .grille {
    grid-template-columns: 1fr;
  }
}