Construisez des grilles auto-adaptatives sans media queries et alignez des composants imbriqués sur les pistes du parent grâce à subgrid.
Ouvrir cette leçon dans Kodokonrepeat(auto-fill, ...) et repeat(auto-fit, ...) créent autant de pistes que la largeur du conteneur en accepte. La différence ne se voit que lorsqu'il y a moins d'éléments que de pistes possibles : auto-fill conserve les pistes vides (vos deux cartes restent à leur taille minimale, du vide à droite), tandis que auto-fit réduit les pistes vides à zéro - les pistes occupées, dotées d'un maximum en 1fr, absorbent alors tout l'espace libéré et vos deux cartes s'étirent sur toute la largeur.
.gallery-fill {
display: grid;
grid-template-columns: repeat(
auto-fill, minmax(150px, 1fr)
);
}
.gallery-fit {
display: grid;
grid-template-columns: repeat(
auto-fit, minmax(150px, 1fr)
);
}Deux pièges de minmax() que même les seniors rencontrent. Premier : minmax(240px, 1fr) déborde quand le conteneur fait moins de 240 px - le minimum est ferme. La parade idiomatique imbrique une fonction de comparaison : minmax(min(100%, 240px), 1fr). Second : 1fr seul équivaut à minmax(auto, 1fr) ; le minimum auto laisse un contenu insécable (URL longue, <pre>) élargir la piste au-delà de sa part. minmax(0, 1fr) verrouille la répartition.
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 240px), 1fr)
);
}subgrid résout le vieux problème de l'alignement à travers des composants imbriqués. Avec grid-template-rows: subgrid, la grille interne n'invente pas ses pistes : elle adopte celles du parent sur la zone qu'elle couvre. Elle hérite aussi des noms de lignes du parent (et peut ajouter les siens), ainsi que du gap, qu'elle peut surcharger localement. Cas d'école : des cartes dont titre, description et pied de page s'alignent horizontalement d'une carte à l'autre, quelle que soit la longueur des contenus - impossible proprement avant subgrid, car chaque carte calculait ses hauteurs en vase clos.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
row-gap: 0.5rem;
}