CSS-Kurs / Grid: repeat, auto-fit, auto-fill und benannte Bereiche

CSS Grid kann Tracks mit repeat() wiederholen und die Anzahl der Spalten mit auto-fit oder auto-fill anpassen. Die beiden automatischen Wiederholungsmodi unterscheiden sich darin, wie sie leere Tracks behandeln; benannte Bereiche bieten eine weitere Möglichkeit, größere Seitenbereiche zu beschreiben.

Vergleichen Sie feste und automatische Wiederholung

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

repeat(3, ...) definiert drei Spalten, unabhängig von der Anzahl der Karten. Ein automatisch platziertes viertes Element geht in die nächste Zeile; es erhöht nicht die Anzahl der Spalten. Dies unterscheidet sich von automatischer Wiederholung, die berechnet, wie viele Tracks hineinpassen. Siehe CSS Grid-Grundlagen: Tracks, Linien und Elementplatzierung.

.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 192px), 1fr));
}

auto-fit berechnet, wie viele Spalten mit der angegebenen Mindestgröße passen. Der erste Wert von minmax ist das Minimum, der zweite Wert ist das Maximum, und 1fr teilt den verbleibenden Platz. Hier stellt min(100%, 192px) sicher, dass die minimale Spaltenbreite nicht größer als die des Elternelements ist. Die Festlegung des Minimums für Spalten auf nur 192px kann dazu führen, dass sogar eine Spalte über das Elternelement hinausgeht, wenn das Elternelement schmaler als 192px ist.

Für einen 800px-Container, 192px Mindestspalten und 16px Lücken benötigen drei Spalten 608px, während vier 816px benötigen. Nur drei Spalten passen. Diese Berechnung bestimmt die Spaltenanzahl; die anschließende Verteilung des freien Raums bestimmt ihre endgültigen Breiten. Langer Text benötigt dennoch eine Umbruchstrategie.

Vergleichen Sie auto-fill und auto-fit

Beide Werte berechnen zunächst die wiederholenden Spalten, die in sie passen. Der Unterschied zu auto-fit liegt im Prozess des Zusammenklappens leerer Wiederholungs-Tracks nach der Platzierung. Wenn Elemente alle Spalten füllen, können die beiden Werte ähnlich aussehen, also machen Sie die Container breiter und haben weniger Karten beim Vergleich. Selbst wenn alle Karten auf einem kleinen Bildschirm in eine Spalte passen, ist der Unterschied schwer zu erkennen. Beschreibung von repeat() in der MDN-Referenz zu repeat() und automatischer Wiederholung sehen.

Verstehen Sie die automatische Platzierung und dichte Anordnung

Elemente, die keine Position angeben, werden zeilenweise gemäß dem Standard grid-auto-flow: row platziert. Selbst wenn das vorherige Element eine große Fläche einnimmt und ein leerer Raum entsteht, kehrt die Standardplatzierung beim Platzieren des nächsten Elements nicht ständig in den leeren Raum zurück. Dieses Standardverhalten macht das Verständnis der HTML-Reihenfolge und den visuellen Ablauf leichter verständlich.

grid-auto-flow: row dense kann den leeren Raum vorne mit kleinen Elementen hinten füllen. Obwohl der Raum enger wird, können die Reihenfolge, in der er auf dem Bildschirm erscheint, und die Reihenfolge des DOM (Document Object Model) unterschiedlich sein. CSS-Positionierung ändert die HTML-Reihenfolge nicht, daher müssen Tastaturfokus und Lesereihenfolge zusammen berücksichtigt werden. Für sinnvoll nummerierte Schritte, chronologische Aufzeichnungen und Formulareinträge ist die Beibehaltung der Reihenfolge wichtiger als das Füllen leerer Rasterplätze. Sie können die Bedingungen für die automatische Platzierung in der Beschreibung von MDNs grid-auto-flow überprüfen.

Führen Sie das Beispiel für die automatische Wiederholung aus

Speichern Sie das Beispiel als grid-auto-repeat.html. Der erste Abschnitt hat zwei Karten in einem Container, der auf 800px beschränkt ist. Der zweite Abschnitt verwendet zwei Links, die sich über zwei Spalten erstrecken, und zwei Links, die sich über eine Spalte erstrecken, wodurch ein Loch entsteht, das Ihnen erlaubt, die normale Platzierung mit dense zu vergleichen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-auto-repeat.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 192px), 1fr));
 gap: 16px; width: min(100%, 800px); }
 .cards > div { min-width: 0; padding: 16px; background: #dceefa; overflow-wrap: anywhere; }
 .flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
 grid-auto-flow: row; max-width: 600px; margin-top: 16px; }
 .flow > a { padding: 12px; background: #e8f5de; }
 .flow > .wide { grid-column: span 2; }
  </style>
</head>
<body>
<h1>Comparing empty repeated columns</h1><div class="cards"><div>First card</div><div>Second card</div></div>
<h2>Default auto-placement</h2><div class="flow"><a class="wide" href="#result">1: two spaces</a><a class="wide" href="#result">2: two spaces</a><a href="#result">3: One space</a><a href="#result">4: one space</a></div>
<p id="result">This is the destination of the automatic-layout link.</p>
</body>
</html>

1. Auf einem breiten Bildschirm, wenn der erste Abschnitt 800px beträgt, nehmen die beiden Karten in auto-fit jeweils 392px ein. Wenn Sie nur auto-fit durch auto-fill ersetzen, bleiben die drei Spalten erhalten, wobei die ersten beiden Spalten der Karten etwa 256px einnehmen und eine Spalte leer bleibt. Nach der Bestätigung stellen Sie auto-fit wieder her.
2. Kopieren Sie weitere div-Elemente in den ersten Abschnitt, um insgesamt vier zu erhalten. Drei Spalten sind gefüllt und eine vierte Karte wird in der nächsten Reihe platziert. Unter diesen Bedingungen gibt es keine leeren wiederholenden Spalten, wodurch der Unterschied zwischen den beiden Werten reduziert wird. Stellen Sie nach der Übung die ursprünglichen zwei Karten wieder her.
3. Verkleinern Sie den Bildschirm, um sicherzustellen, dass die Breite des übergeordneten Elements weniger als 192px beträgt. Dank min(100%, 192px) passt eine Spalte in ihr übergeordnetes Element. Eine Änderung des Minimums auf nur 192px kann in engeren Bereichen zu Überlauf führen. Nach dem Vergleich wird der ursprüngliche Ausdruck wiederhergestellt.
4. Überprüfen Sie den leeren Raum nach Link 1 und die Position von Link 3 in .flow. Wenn Sie nur grid-auto-flow auf row dense ändern, wird Nummer 3 im vorherigen leeren Raum platziert. Überprüfen Sie mit Tab, ob die Reihenfolge 1 → 2 → 3 → 4 beibehalten wird. Nach der Übung wieder zu row zurückkehren.

Definieren Sie Seitenbereiche mit benannten Bereichen

Anstatt Spalten- und Zeilenzahlen separat zu berechnen, ist es einfacher, die beabsichtigte Seitenlayoutstruktur zu verstehen, indem man große Abschnitte mit Namen wie header·main·aside·footer ausdrückt. Jeder String in grid-template-areas ist eine Zeile, und die durch Leerzeichen getrennten Namen innerhalb des Strings sind Zellen. Der Wert grid-area des Kindes muss seinem Namen entsprechen, um diesen Bereich zu betreten. Wie man die Spaltenkonfiguration basierend auf der Bildschirmbreite ändert, wird in Media Queries und inhaltsabhängige Breakpoints erklärt.

Wenn derselbe Name über mehrere Zellen hinweg wiederholt wird, entsteht ein rechteckiger Bereich. Bereiche können nicht wie ein L oder als isoliertes Inselchen geformt sein. Jede Reihe muss die gleiche Anzahl an Zellen haben, und Zellen, die leer bleiben sollen, werden durch einen Punkt angezeigt (.). Wenn eine Deklaration ungültig ist, wird sie vom Browser nicht beachtet, was den Eindruck einer automatischen Platzierung erwecken kann. Sie können die Bedingungen für gültige Bereiche in der Beschreibung zu grid-template-areas von MDN prüfen.

Speichern Sie den folgenden Code als grid-areas.html. Auf dem Desktop werden der Hauptbereich und die unterstützenden Informationen nebeneinander angeordnet, und bei 640px oder kleiner erscheinen sie in einer Spalte. Entsprechend dem Bildschirmlayout wurde die HTML-Reihenfolge nicht umgekehrt, aber der Haupttext stand vor den unterstützenden Informationen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-areas.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
 grid-template-areas: "header header" "main aside" "footer footer"; gap: 16px; max-width: 1000px; }
 .page > * { min-width: 0; padding: 20px; background: #dceefa; overflow-wrap: anywhere; }
 header { grid-area: header; } main { grid-area: main; } aside { grid-area: aside; } footer { grid-area: footer; }
 @media (max-width: 640px) {
 .page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "aside" "footer"; }
 }
  </style>
</head>
<body>
<h1>Page area names</h1><div class="page"><header>Site title</header><main><h2>Main content</h2><p>This is the main content area. The HTML order keeps it first on mobile, too.</p></main><aside>Related information</aside><footer>Contact and site information</footer></div>
</body>
</html>

1. Stellen Sie sicher, dass die Kopf- und Fußzeile auf einem breiten Bildschirm zwei Spalten einnehmen. Wenn Sie den Bildschirm auf 640px oder weniger verengen, werden header → main → aside → footer in einer Spalte dargestellt. Sehen Sie, warum Sie Spaltendefinitionen und Bereichszeichenfolgen zusammen ändern müssen.
2. Ändern Sie nur den Wert von grid-area am aside-Element zu einem anderen Namen. Die Verbindung zwischen dem im Template reservierten 'aside'-Bereich und dem tatsächlichen Element kann getrennt werden und nicht an der vorgesehenen Stelle erscheinen. Stellen Sie den Namen wieder auf 'aside' zurück.
3. Wenn Sie nur das Template für einen breiten Bildschirm in "header header" "header aside" "footer footer" ändern, wird die Kopfzeile L-förmig, und die Deklaration von grid-template-areas wird ungültig. Nach Bestätigung der Anwendung in den Entwickler-Tools werden die ursprünglichen drei Zeichenfolgen wiederhergestellt.

In der Praxis ist es einfacher zu pflegen, wenn Sie den Bereich für das Erstellen von Spalten basierend auf der Anzahl der Karten und den Bereich für die Benennung von Seitenabschnitten trennen. Auto-Wiederholung bestimmt die Anzahl und die Mindestbreite, während Regionsnamen die Seitenstruktur und Übergangspunkte bestimmen. Bevor Sie versuchen, die beiden in einer Regel zu erzwingen, entscheiden Sie, welches Problem jeder Container zu lösen versucht.