In diesem siebten Beispiel kombinieren Sie einige der Konzepte, die Sie bereits kennengelernt haben, um ein responsives Layout mit automatisch platzierten und flexiblen untergeordneten Elementen zu erstellen. Ziemlich praktisch. Die wichtigsten Begriffe, die Sie hier beachten sollten, sind repeat
, auto-(fit|fill)
und minmax()
, an die Sie sich als Akronym RAM erinnern.
Alles zusammen sieht so aus:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Sie verwenden wieder repeat()
, jetzt aber mit dem Schlüsselwort auto-fit
anstelle eines expliziten numerischen Werts. Dadurch wird die automatische Platzierung dieser untergeordneten Elemente ermöglicht. Diese untergeordneten Elemente haben einen Basismindwert von 150px
mit einem Höchstwert von 1fr
. Das bedeutet, dass sie auf kleineren Bildschirmen die volle Breite von 1fr
einnehmen. Wenn sie jeweils eine Breite von 150px
erreichen, beginnen sie, in dieselbe Linie zu fließen.
Mit auto-fit
werden alle vollständig leeren Tracks zu 0
minimiert und die gefüllten Tracks werden größer und belegen ihren Platz. Wenn Sie dies jedoch in auto-fill
ändern, nehmen leere Titel genauso viel Speicherplatz ein wie bei einer Füllung:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}