Baue selbstanpassende Grids ohne Media Queries und richte verschachtelte Komponenten mit subgrid an den Tracks des Elternteils aus.
Diese Lektion in Kodokon öffnenrepeat(auto-fill, ...) und repeat(auto-fit, ...) erzeugen so viele Tracks, wie die Breite des Containers zulässt. Der Unterschied zeigt sich nur, wenn es weniger Elemente als mögliche Tracks gibt: auto-fill behält die leeren Tracks (deine zwei Karten bleiben bei ihrer Mindestgröße, mit leerem Raum rechts), während auto-fit die leeren Tracks auf null zusammenfallen lässt - die belegten Tracks schlucken dann, dank eines Maximums von 1fr, den gesamten frei gewordenen Raum, und deine zwei Karten dehnen sich über die volle Breite.
.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)
);
}Zwei minmax()-Fallen, in die selbst erfahrene Entwickler tappen. Erstens: minmax(240px, 1fr) läuft über, wenn der Container schmaler als 240px ist - das Minimum ist eine harte Untergrenze. Der idiomatische Fix verschachtelt eine Vergleichsfunktion: minmax(min(100%, 240px), 1fr). Zweitens: 1fr allein entspricht minmax(auto, 1fr); das Minimum auto lässt unumbrechbaren Inhalt (eine lange URL, ein <pre>) den Track über seinen Anteil hinaus verbreitern. minmax(0, 1fr) fixiert die Verteilung.
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, 240px), 1fr)
);
}subgrid löst das alte Problem der Ausrichtung über verschachtelte Komponenten hinweg. Mit grid-template-rows: subgrid erfindet das innere Grid keine eigenen Tracks: Es übernimmt die des Elternteils über den Bereich, den es überspannt. Es erbt außerdem die Linienbezeichnungen des Elternteils (und kann eigene hinzufügen) sowie den gap, den es lokal überschreiben kann. Der klassische Fall: Karten, deren Titel, Beschreibung und Fußzeile sich von einer Karte zur nächsten horizontal ausrichten, egal wie lang ihr Inhalt ist - vor subgrid sauber unmöglich, weil jede Karte ihre Höhen isoliert berechnete.
.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;
}