Tailwind CSS - Lecon 2 : Layout Flexbox et Grid

Contenir et centrer le contenu

Avant de parler flex et grid, il faut comprendre comment contenir et centrer le contenu d’une page. Les classes max-w-* + mx-auto que vous utiliserez dans presque chaque projet :

HTML

<!-- Méthode recommandée : max-w + mx-auto -->
<div class="max-w-6xl mx-auto px-6">
  Contenu max 1152px, centré, 24px de padding horizontal
</div>

<!-- Valeurs courantes -->
<!-- max-w-sm  → 384px  | max-w-md  → 448px -->
<!-- max-w-lg  → 512px  | max-w-xl  → 576px -->
<!-- max-w-3xl → 768px  | max-w-5xl → 1024px -->
<!-- max-w-6xl → 1152px | max-w-7xl → 1280px -->

Flexbox avec Tailwind

La logique est simple : flex active le contexte flexbox, puis chaque propriété flexbox a sa propre classe utilitaire.

Classe Tailwind	CSS équivalent	Usage courant
`flex`	display: flex	Activer flexbox
`inline-flex`	display: inline-flex	Flex en ligne (boutons)
`flex-col`	flex-direction: column	Empiler verticalement
`flex-wrap`	flex-wrap: wrap	Retour à la ligne si débordement
`items-center`	align-items: center	Centrer sur l’axe transversal
`items-start`	align-items: flex-start	Aligner en haut
`justify-center`	justify-content: center	Centrer sur l’axe principal
`justify-between`	justify-content: space-between	Distribuer avec espaces
`justify-end`	justify-content: flex-end	Pousser vers la droite
`gap-4`	gap: 1rem	Espacement entre éléments
`flex-1`	flex: 1 1 0%	Prendre tout l’espace disponible
`shrink-0`	flex-shrink: 0	Taille fixe, ne rétrécit pas

Exemple : barre de navigation

HTML navbar.html

<nav class="flex items-center justify-between
           px-6 py-4 bg-white shadow-sm">

  <a href="/" class="font-bold text-xl text-gray-900">MonSite</a>

  <!-- Liens : cachés sur mobile, visibles md+ -->
  <ul class="hidden md:flex items-center gap-8 list-none m-0">
    <li><a href="#" class="text-gray-600 hover:text-gray-900">Accueil</a></li>
    <li><a href="#" class="text-gray-600 hover:text-gray-900">Blog</a></li>
  </ul>

  <button class="bg-blue-600 text-white px-5 py-2
                  rounded-full font-semibold text-sm
                  hover:bg-blue-700 transition-colors">
    S'inscrire
  </button>
</nav>

ℹ️

justify-between : la clé des navbars

justify-between pousse les éléments vers les extrémités avec tout l’espace libre entre eux. C’est la propriété que vous utiliserez dans absolument toutes vos barres de navigation.

Exemple : carte avec avatar

HTML

<div class="flex items-start gap-4 p-5
           bg-white rounded-2xl border border-gray-100">

  <!-- shrink-0 : l'avatar ne rétrécit jamais -->
  <img src="avatar.jpg" alt="Alice"
       class="w-12 h-12 rounded-full shrink-0"/>

  <!-- flex-1 : prend tout l'espace restant -->
  <div class="flex-1 min-w-0">
    <div class="flex items-center justify-between mb-1">
      <span class="font-semibold text-gray-900">Alice Martin</span>
      <span class="text-xs text-gray-400">Il y a 2h</span>
    </div>
    <p class="text-gray-600 text-sm leading-relaxed">
      Super article ! J'ai refait ma landing page en une après-midi.
    </p>
  </div>
</div>

CSS Grid avec Tailwind

CSS Grid est idéal pour les mises en page à deux dimensions. Tailwind simplifie sa syntaxe avec grid, grid-cols-* et gap-*.

HTML

<!-- 3 colonnes égales -->
<div class="grid grid-cols-3 gap-6">
  <div>Col 1</div>
  <div>Col 2</div>
  <div>Col 3</div>
</div>

<!-- Layout content + sidebar (12 colonnes) -->
<div class="grid grid-cols-12 gap-6">
  <main    class="col-span-8">Contenu principal</main>
  <aside   class="col-span-4">Sidebar</aside>
</div>

<!-- col-span-3 : header pleine largeur -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-3 bg-slate-800 text-white p-4 rounded-xl">
    Header pleine largeur
  </div>
  <div class="col-span-2 bg-white p-4 rounded-xl border">Contenu</div>
  <div class="col-span-1 bg-gray-50 p-4 rounded-xl border">Sidebar</div>
</div>

Rendu visuel — grid-cols-3

Col 1

Col 2

Col 3

Rendu visuel — grid-cols-4

Grilles responsives et breakpoints

Tailwind est pensé mobile-first : les classes sans préfixe s’appliquent à tous les écrans, les préfixes surchargent pour les écrans plus grands.

Préfixe	Taille min	Appareils
`(aucun)`	0px	Tous les écrans (mobile-first)
`sm:`	640px	Petites tablettes
`md:`	768px	Tablettes
`lg:`	1024px	Laptops
`xl:`	1280px	Desktops
`2xl:`	1536px	Grands écrans

HTML layout-responsive.html

<!-- 1 col mobile → 2 tablette → 3 desktop → 4 grand écran -->
<div class="grid
           grid-cols-1
           sm:grid-cols-2
           lg:grid-cols-3
           xl:grid-cols-4
           gap-6">
  <div class="bg-white rounded-2xl shadow p-6">Carte 1</div>
  <div class="bg-white rounded-2xl shadow p-6">Carte 2</div>
</div>

<!-- Layout article + sidebar -->
<div class="max-w-7xl mx-auto px-4 lg:px-8 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <section class="lg:col-span-2">
      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold">
        Titre principal
      </h1>
    </section>
    <aside class="lg:col-span-1">
      <div class="bg-white rounded-2xl p-6 shadow sticky top-6">
        Sidebar collante
      </div>
    </aside>
  </div>
</div>

💡

sticky top-6 : la sidebar parfaite

sticky top-6 = position: sticky; top: 1.5rem. La sidebar suit le scroll et reste visible sans déborder du bas du contenu.

Flex vs Grid : quand utiliser lequel ?

Situation	Utiliser	Pourquoi
Navbar, boutons côte à côte	`flex`	Alignement sur 1 axe
Carte avec avatar + texte	`flex`	1 ligne, flex-1 et shrink-0
Centrer un élément	`flex items-center justify-center`	Le plus simple
Galerie de cartes	`grid`	2D, colonnes égales
Layout page complète	`grid`	Contrôle précis des colonnes
Grille responsive	`grid` + breakpoints	grid-cols change selon l’écran

Exercice pratique

Header : flex items-center justify-between h-16 px-6 bg-white shadow-sm
Hero : fond dégradé sombre, flex flex-col items-center text-center py-24 px-6, grand titre + 2 boutons côte à côte avec flex gap-4 mt-8
Section cartes : grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 py-16
Footer : fond sombre, grid grid-cols-2 md:grid-cols-4 gap-8 py-12 px-6