CSS : donnez forme à vos idées

Ce que vous saurez faire

Expliquer pourquoi une déclaration gagne et éviter qu’une grille dépasse son conteneur. Le bon outil de départ est l’inspecteur du navigateur, pas une nouvelle couche de !important.

1. Comprendre la règle gagnante

À origine, importance et couche équivalentes, la spécificité départage les sélecteurs. Comparez ces deux règles :

.card p { color: #353b31; }
p { color: #b84324; }

Le paragraphe contenu dans .card reste sombre, malgré la seconde règle placée après : le premier sélecteur est plus spécifique. Si deux sélecteurs ont la même spécificité dans les mêmes conditions, l’ordre d’apparition les départage.

Dans l’inspecteur, sélectionnez le paragraphe et cherchez la déclaration barrée. Vérifiez ensuite le fichier qui fournit la règle gagnante. Corrigez le composant responsable plutôt que d’ajouter un identifiant ou un !important destiné uniquement à gagner la bataille suivante.

Référence : spécificité CSS.

2. Laisser la grille répondre à l’espace réel

Une colonne d’au moins 240 pixels convient sur grand écran, mais peut dépasser un parent de 220 pixels. Le minimum doit lui aussi pouvoir s’adapter.

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.card {
  min-width: 0;
  overflow-wrap: anywhere;
}
.card img {
  max-width: 100%;
  height: auto;
}

Le minimum de colonne ne dépasse pas la largeur disponible. auto-fit ajuste le nombre de colonnes et 1fr partage l’espace restant. Cette règle ne dépend pas du nom de l’appareil : une carte dans une barre latérale s’adapte aussi à son petit conteneur.

Ne masquez pas un débordement avec overflow: hidden sans comprendre ce qui dépasse : cela pourrait couper du texte ou une indication de focus. Un bloc de code mérite généralement son propre défilement horizontal.

Référence : colonnes de grille.

À vous de jouer

Placez trois cartes dans un conteneur étroit. Donnez à l’une un titre de plusieurs mots et à l’autre une longue chaîne sans espace. Quelles règles de l’exemple protègent la lecture ?

Correction commentée

Le minimum adaptable évite une colonne trop large. min-width: 0 autorise la réduction de la carte et overflow-wrap: anywhere coupe au besoin la chaîne. Vérifiez aussi à 200 % de zoom : aucun texte ne doit être dissimulé pour obtenir une capture propre.