Éviter les débordements sans dupliquer les règles

Sur un petit écran, une carte peut élargir toute la page à cause d’un mot trop long, d’une adresse ou d’une colonne qui refuse de rétrécir. Ajouter des règles à chaque largeur ne résout pas toujours le problème : cela peut multiplier les exceptions sans corriger sa cause. Vous allez rendre la grille compressible et permettre aux chaînes longues de se couper proprement.

Le problème vient parfois de la largeur minimale

Une piste de conseils peut utiliser des colonnes flexibles, par exemple avec 1fr. Mais une piste contenant un mot très long ou une adresse sans espaces peut imposer une largeur minimale à sa colonne. La grille conserve alors cette largeur au lieu de réduire la colonne, et le contenu déborde de son conteneur.

La fonction minmax() permet de fixer une limite minimale et une limite maximale pour une piste. Avec minmax(0, 1fr), la piste peut descendre jusqu’à zéro et occuper l’espace disponible sans être bloquée par sa taille minimale automatique. Cette valeur est utile lorsque le contenu doit pouvoir se comprimer dans une grille.

Rendre les colonnes compressibles

Dans le projet de l’atelier de jardinage, la grille nommée des conseils a déjà été présentée dans la leçon sur le placement des zones. Gardez cette organisation et remplacez la définition des colonnes par des pistes qui peuvent réellement rétrécir. La règle s’applique à chaque colonne créée par repeat().

:root {
    --couleur-fond: #f4f1e8;
    --couleur-texte: #24352b;
    --couleur-accent: #426b45;
    --espace: 1rem;
}

.conseils {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espace);
}

.carte {
    min-width: 0;
    padding: var(--espace);
    color: var(--couleur-texte);
    background: var(--couleur-fond);
}

.carte p,
.contact a {
    overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
    .conseils {
        grid-template-columns: minmax(0, 1fr);
    }
}

La déclaration min-width: 0 sur la carte complète la règle de grille : elle autorise l’élément lui-même à rétrécir sous sa largeur minimale automatique. Elle est particulièrement utile lorsque l’élément de grille contient du texte, une image ou un autre élément qui exerce une contrainte de largeur. Ne l’ajoutez pas partout par réflexe : utilisez-la sur l’élément qui refuse effectivement de se réduire.

Traiter les chaînes longues sans cacher le contenu

Une adresse de contact ou un identifiant peut ne contenir aucun espace où le navigateur pourrait effectuer un retour à la ligne. overflow-wrap: anywhere autorise une coupure à l’intérieur d’une chaîne lorsque cela évite un débordement. Le texte reste présent et lisible, contrairement à une solution qui masquerait la partie excédentaire avec overflow: hidden. Appliquez la propriété aux textes concernés, plutôt qu’à toute la page.

Dans la feuille proposée, le paragraphe de chaque carte et le lien du bloc de contact peuvent donc couper une longue chaîne. Par exemple, [email protected] pourra passer sur plusieurs lignes au lieu d’étendre la carte. La règle ne change pas le rendu des phrases ordinaires lorsque le texte tient déjà dans la largeur disponible.

Limiter les règles responsives

La media query de l’exemple ne modifie qu’un choix structurel : la grille passe de deux colonnes à une. Les corrections de débordement restent dans les règles de base et fonctionnent à toutes les largeurs. Cette séparation évite de recopier les mêmes correctifs dans plusieurs media queries et réduit le risque qu’une règle oubliée réintroduise le problème.

Ne créez pas un nouveau point de rupture simplement parce qu’une chaîne déborde : faites d’abord en sorte que le contenu puisse se répartir dans l’espace disponible. Conservez une media query lorsque la composition doit réellement changer, par exemple quand deux colonnes deviennent trop étroites pour les cartes. Vous étudierez plus tard comment choisir et tester ces changements sur différentes largeurs.

À retenir

• Utilisez minmax(0, 1fr) pour laisser une piste de grille se réduire.
• Ajoutez min-width: 0 à un élément de grille qui refuse de rétrécir.
• Appliquez overflow-wrap: anywhere aux textes susceptibles de contenir de longues chaînes sans espaces.
• Gardez les corrections générales dans les règles de base et réservez les media queries aux changements réels de composition.

Dans la prochaine leçon, vous utiliserez les outils du navigateur pour repérer plus rapidement les éléments responsables d’un débordement ou d’un mauvais alignement.