Créer une grille de cartes de documentation responsive

Les index de documentation doivent être faciles à parcourir. Une grille de cartes responsive convient bien lorsque les lecteurs ont besoin de comparer des guides, d’accéder à un sujet ou de découvrir des ressources connexes.

Ce tutoriel construit une grille simple qui fonctionne avec du HTML et du CSS simples, puis montre comment l’adapter aux utilitaires Bootstrap.

Le balisage

Commencez par des liens sémantiques. Chaque carte doit être une destination, et non simplement une boîte contenant un bouton.

<section class="doc-grid" aria-label="Documentation topics">
  <a class="doc-card" href="/docs/getting-started/">
    <span class="doc-card__eyebrow">Start</span>
    <h2>Getting Started</h2>
    <p>Install the theme, configure your site, and publish your first page.</p>
  </a>

  <a class="doc-card" href="/docs/customization/">
    <span class="doc-card__eyebrow">Design</span>
    <h2>Customization</h2>
    <p>Adjust layouts, navigation, colors, and reusable includes.</p>
  </a>
</section>

La carte entière est cliquable, ce qui est plus pratique sur les appareils tactiles et plus rapide à parcourir.

La grille

Utilisez auto-fit avec minmax afin que la mise en page s’adapte sans points de rupture.

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.doc-card {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
}

.doc-card:hover,
.doc-card:focus-visible {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

Le rayon des cartes reste modéré et l’état au survol modifie la bordure et le traitement du focus sans décaler la mise en page.

Version compatible Bootstrap

Si le projet utilise déjà Bootstrap, gardez la grille personnalisée et laissez Bootstrap gérer les espacements et la typographie.

<section class="doc-grid my-4" aria-label="Documentation topics">
  <a class="doc-card d-block h-100" href="/docs/deployment/">
    <span class="text-uppercase small text-secondary">Publish</span>
    <h2 class="h5 mt-2">Deployment</h2>
    <p class="mb-0">Deploy to GitHub Pages, Netlify, or a custom domain.</p>
  </a>
</section>

Cela évite de lutter contre le framework tout en vous offrant une mise en page adaptée à la documentation.

Vérifications d’accessibilité

Avant de mettre en ligne la grille, vérifiez ces détails :

• La carte dispose de styles de focus visibles
• Le texte du lien a du sens lorsqu’il est lu hors contexte
• Les niveaux de titre respectent la structure de la page
• Les cartes ne s’appuient pas uniquement sur la couleur pour indiquer un état
• Le contenu reste lisible sur des largeurs étroites

Métadonnées facultatives

Les cartes de documentation deviennent plus utiles lorsqu’elles incluent une petite ligne d’état :

Gardez les métadonnées courtes. La carte doit aider les lecteurs à choisir, sans devenir un article miniature.

Modèle final

Une bonne grille de cartes est prévisible. Elle utilise des dimensions stables, des libellés clairs et un lien couvrant toute la carte. Une fois le modèle en place, les index de documentation deviennent plus faciles à étendre sans avoir à repenser la page à chaque fois.

Lectures complémentaires

• CSS Grid Mastery : créez n’importe quelle mise en page imaginable — la boîte à outils complète de CSS Grid, avec des démos en direct, dans le navigateur, pour chaque propriété utilisée ici.
• Modèles de formulaires accessibles : libellés, erreurs et états utiles — un autre tutoriel sur les modèles front-end de cette série.