CSS / Débutant / 8 min

Des cartes adaptées au mobile

Construire une grille fluide sans multiplier les points de rupture.

Guide de la rédaction · 17 octobre 2026

Commencer par le contenu

Une carte doit avoir un titre clair, une courte description et un lien compréhensible. Construisez d’abord une liste qui fonctionne sans mise en page, puis appliquez la grille à son conteneur.

<section class="grille" aria-label="Tutoriels">
  <article><h2>HTML</h2><p>Structurer une page.</p></article>
  <article><h2>CSS</h2><p>Présenter le contenu.</p></article>
  <article><h2>JavaScript</h2><p>Ajouter une interaction.</p></article>
</section>

<style>
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}
.grille article { padding: 1.5rem; border: 1px solid #ccd5cd; }
</style>

Pourquoi cette grille fonctionne

auto-fit crée autant de colonnes que possible. minmax leur donne une largeur minimale et partage le reste de l’espace. Le min(100%, 16rem) évite que la largeur minimale dépasse celle d’un écran étroit.

Tester les limites

Réduisez lentement la fenêtre : trois colonnes deviennent deux, puis une. Testez une carte avec un titre long et un paragraphe supplémentaire. Ajoutez max-width: 100% aux images pour qu’elles restent dans leur carte.

Éviter les pièges

Ne réorganisez pas visuellement les cartes si cela contredit leur ordre dans le document. Le clavier suit cet ordre. Si un lien ou un mot très long dépasse, utilisez overflow-wrap: anywhere sur le contenu concerné.

À vous de jouer

Ajoutez une quatrième carte. Passez gap à 2rem et observez quand les colonnes changent. Le bon réglage dépend du contenu, pas du nom d’un modèle de téléphone.

Pour aller plus loin

Retrouvez les références des langages dans les ressources MDN pour apprendre le développement web.