Gérer l’espacement et le contenu des cartes

Dans une grille de conseils, certaines cartes contiennent deux lignes et d’autres un paragraphe entier. Sans réglage précis, les hauteurs et les alignements peuvent sembler irréguliers, et une adresse ou un mot très long peut pousser une carte hors de sa colonne. Vous allez régler les lignes de la grille, maîtriser l’alignement des cartes et éviter qu’un contenu impose une largeur excessive.

Donner une hauteur cohérente aux lignes

Dans la leçon précédente, vous avez défini les colonnes de la grille des conseils avec grid-template-columns. Les lignes peuvent, elles aussi, recevoir une taille explicite avec grid-template-rows, mais vous ne connaissez pas toujours le nombre de rangées à l’avance. La propriété grid-auto-rows définit alors la taille des lignes créées automatiquement pour accueillir les cartes.

Une valeur comme minmax(12rem, auto) garantit une hauteur minimale, tout en laissant la ligne grandir si une carte contient davantage de texte. Le mot-clé auto tient compte du contenu : une carte plus longue peut donc agrandir toute la rangée. C’est généralement préférable à une hauteur fixe, qui risque de couper le texte ou de laisser un espace inadapté.

.conseils {
    display: grid;
    grid-template-columns: repeat(2, minmax(14rem, 1fr));
    grid-auto-rows: minmax(12rem, auto);
    gap: var(--espace-m);
}

Avec cette règle, chaque rangée mesure au moins 12rem, mais peut s’agrandir pour contenir un conseil plus détaillé. La fonction minmax() utilisée ici établit une borne minimale et une borne supérieure automatique. Elle ne sert pas encore à corriger les débordements liés à la largeur des colonnes ; cette situation sera traitée dans une leçon ultérieure.

Aligner les cartes dans la grille

Quand la grille occupe plus de hauteur que ses rangées, align-content règle la répartition de ces rangées dans l’espace disponible. Par exemple, align-content: start les regroupe en haut ; space-between répartit l’espace restant entre elles. Cette propriété agit sur l’ensemble des rangées, pas sur le contenu d’une carte individuelle.

Pour positionner les cartes elles-mêmes à l’intérieur de leurs cellules, utilisez justify-items. La valeur stretch, qui est la valeur initiale, les étire sur la largeur disponible ; start les place au début de chaque cellule sans les étirer. Pour une liste de cartes de même présentation, conserver stretch produit généralement des largeurs régulières.

.conseils {
    min-height: 28rem;
    align-content: start;
    justify-items: stretch;
}

.carte-conseil {
    padding: var(--espace-m);
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.5rem;
}

Ici, les rangées commencent en haut de la grille, tandis que chaque carte occupe la largeur de sa cellule. La hauteur minimale de la grille rend l’espace disponible visible lorsque les conseils sont courts ; si la grille n’a pas de hauteur supplémentaire, align-content n’aura pas d’espace à répartir. Le remplissage interne de chaque carte reste indépendant de cette répartition.

Empêcher un contenu de forcer la carte à déborder

Un élément de grille possède une taille minimale automatique. Elle peut l’empêcher de rétrécir suffisamment pour tenir dans sa cellule, notamment si elle contient un contenu large, comme un lien d’adresse ou un élément intégré. La règle min-width: 0 autorise la carte à descendre sous cette taille minimale et à respecter la largeur de sa colonne.

.carte-conseil {
    min-width: 0;
    padding: var(--espace-m);
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.5rem;
}

.carte-conseil a {
    max-width: 100%;
}

La carte peut désormais se réduire à la largeur de sa cellule, même si son contenu exerce une forte contrainte. min-width: 0 ne découpe pas à lui seul un mot ou une URL trop longue : il empêche d’abord la carte d’imposer une largeur supérieure à celle de la grille. Vous apprendrez dans une prochaine leçon à traiter les contenus textuels qui restent trop longs pour leur ligne.

À retenir

• grid-auto-rows règle la taille des rangées créées automatiquement.
• minmax(12rem, auto) impose une hauteur minimale sans couper les cartes plus longues.
• align-content répartit les rangées dans l’espace disponible ; justify-items positionne les cartes dans leurs cellules.
• min-width: 0 permet à une carte de respecter la largeur de sa colonne malgré un contenu large.

Dans la prochaine leçon, vous choisirez des points de rupture utiles pour adapter la page aux différentes largeurs d’écran.