Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Grid : colonnes, minmax(), auto-fit et auto-fill | SovranCode

Contenu du coursCSS — Grid · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS69 min

CSS — Grid

Create two-dimensional layouts with explicit tracks, auto placement, and resilient minimums.

Grid organise les lignes et les colonnes ensemble. Le dimensionnement des pistes répartit l’espace ; minmax() définit leurs limites et auto-fit permet d’adapter le nombre de cartes par ligne sans prévoir un point de rupture pour chaque largeur d’écran.

Comprendre le dimensionnement des colonnes

Repérez display: grid, puis la formule qui répète les colonnes et leur donne une largeur minimale et maximale. Cherchez ensuite ce qui permet à une colonne de tenir dans un conteneur plus étroit que 16rem.

.course-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}
/* Add multi-column spans only when the layout has enough tracks. */

Les bons réflexes

Utilisez minmax(0, 1fr) lorsqu’il faut permettre à une piste de rétrécir malgré le minimum imposé par son contenu, et adaptez aussi le retour à la ligne.
Nommez les zones importantes de la page lorsque cela rend la grille plus claire.
Laissez le placement automatique organiser les collections régulières.

L’erreur à éviter

Un minimum fixe de 320px peut dépasser d’un conteneur de 280px. Limitez-le à la largeur disponible, par exemple avec min(100%, 320px). La version en rem permet aussi de suivre la taille de police racine.

ATELIER CSS · ENVIRON 35 MIN

Créer un catalogue qui s’adapte à son conteneur

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Les pistes définissent une structure commune

Grid crée des lignes et des colonnes partagées, ce qui permet d’aligner les éléments dans les deux dimensions. L’unité fr répartit l’espace disponible pour les pistes ; ce n’est pas un pourcentage fixe de tout le conteneur avant déduction des espacements. Une piste définie par 1fr possède un minimum automatique qui peut dépendre d’un contenu long. minmax(0, 1fr) permet de la laisser rétrécir, mais son contenu doit encore pouvoir revenir à la ligne ou gérer son débordement. Activez le repère Grid dans les outils de développement pour voir les pistes et les espacements et distinguer un problème de piste d’un problème de taille d’enfant.

Adapter le nombre de colonnes sans imposer un minimum trop grand

repeat(auto-fit, ...) crée autant de pistes que la largeur le permet, puis réduit à zéro les pistes vides, laissant les pistes occupées s’élargir. auto-fill conserve les pistes vides. Un minimum fixe peut encore déborder si le conteneur devient plus étroit : min(100%, 16rem) limite ce minimum à la largeur disponible. Attention à grid-column: span 2 dans une disposition à une seule colonne : cette règle peut créer une piste implicite supplémentaire. N’activez les éléments qui s’étendent sur plusieurs colonnes que lorsque la grille en possède assez. Gardez aussi un ordre HTML cohérent, même si le placement explicite permet un autre ordre visuel.

Corriger une grille qui dépasse de son parent

Prévoyez la différence, puis comparez les deux aperçus. Ils utilisent exactement le même HTML.

Avant correction

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

Après correction

.grid { display:grid; width:240px; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:8px; }

Avant : le minimum de la piste dépasse les 240px du parent. Après : min(100%,320px) limite ce minimum à la largeur disponible. Les deux cartes tiennent sur une colonne sans couper leur texte.

Examiner le HTML commun

<div class="grid"><div class="tile">HTML</div><div class="tile">CSS</div></div>

Essayez la correction dans l’éditeur ci-dessous, puis testez une largeur réduite et un contenu plus long.

Retirez deux cartes et comparez auto-fit à auto-fill dans une fenêtre large. Examinez les pistes vides avec le repère Grid des outils de développement.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.6 system-ui; margin: 0; padding: 1rem; }
.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.catalog article { min-width: 0; overflow-wrap: anywhere; padding: 1.5rem; border: 2px solid #254fc0; }
h1, h2 { font-size: 1.5rem; }
</style>
</head>
<body>
<main class="catalog"><article><h1>Les bases du HTML</h1><p>Structurez un document porteur de sens.</p></article><article><h2>La mise en page en CSS</h2><p>Disposez des composants flexibles.</p></article><article><h2>Des interfaces accessibles</h2><p>Concevez pour différentes façons d’utiliser le Web.</p></article></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { font: 1rem/1.6 system-ui; margin: 0; padding: 1rem; }
.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.catalog article { min-width: 0; overflow-wrap: anywhere; padding: 1.5rem; border: 2px solid #254fc0; }
h1, h2 { font-size: 1.5rem; }
</style>
</head>
<body>
<main class="catalog"><article><h1>Les bases du HTML</h1><p>Structurez un document porteur de sens.</p></article><article><h2>La mise en page en CSS</h2><p>Disposez des composants flexibles.</p></article><article><h2>Des interfaces accessibles</h2><p>Concevez pour différentes façons d’utiliser le Web.</p></article></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

Voir la correction et son explication

.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

Une piste dont le minimum est de 320px ne tient pas dans un conteneur de 280px. Limiter ce minimum à 100% permet à une colonne de rester dans la largeur disponible.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez un catalogue de cartes qui passe d’une à plusieurs colonnes selon la place disponible, sans points de rupture propres à chaque appareil. Testez avec une, trois, puis sept cartes.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Créer un catalogue qui s’adapte à son conteneur — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Créer un catalogue qui s’adapte à son conteneur</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Créer un catalogue qui s’adapte à son conteneur — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Créer un catalogue qui s’adapte à son conteneur</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Le catalogue ne dépasse pas d’un bloc conteneur de 280px de large.Vous savez expliquer la différence entre auto-fit et auto-fill.Les textes longs restent lisibles et aucune règle span 2 appliquée sans condition ne crée de piste supplémentaire.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Quel mot-clé de répétition réduit à zéro les pistes inutilisées ?auto-fillauto-fitspan

2. Pourquoi utiliser minmax(0, 1fr) plutôt que 1fr dans une grille contrainte en largeur ?Pour remplacer le minimum automatique lié au contenu par un minimum nulPour interdire tous les retours à la lignePour placer chaque élément en position absolue

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

CSS — Grid

Comprendre le dimensionnement des colonnes

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Créer un catalogue qui s’adapte à son conteneur

Les pistes définissent une structure commune

Adapter le nombre de colonnes sans imposer un minimum trop grand

Corriger une grille qui dépasse de son parent

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris