RAM (Wiederholen, Automatisch, Min.)

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));
}

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}