CSS-Kurs / Grid-Grundlagen: Tracks, Linien und Platzierung

CSS Grid definiert Reihen und Spalten für ein zweidimensionales Layout und platziert direkte Kind-Elemente in diesem Grid. Grid-Linien begrenzen Tracks und Zellen; ein Element kann mehrere Tracks überspannen, ohne die Dokumentenreihenfolge zu ändern.

Unterscheiden Sie Container, Linien, Tracks, Zellen und Bereiche

Ein Grid-Container ist ein Elternteil, der display: grid anwendet, und Grid-Elemente sind direkte Kinder dieses Elternteils. Kinder innerhalb des ersten Kindes sind keine unabhängigen Elemente im äußeren Grid. Ein Grid in CSS zu zeichnen, erzeugt keine neuen HTML-Elemente; es ändert lediglich die Art und Weise, wie wir berechnen, wo jedes Kind im Grid platziert wird.

Liniennummern und Spaltennummern sind verschieden. Zwei Spalten haben einschließlich ihrer äußeren Grenzen die vertikalen Linien 1, 2 und 3. Ein Element zwischen den Linien 1 und 3 belegt beide Spalten. gap ist der Abstand zwischen den Tracks und wird separat vom Padding oder Rahmen des Elements berechnet. Es ist einfach, Zeilennummern und tatsächliche Bereiche zu sehen, indem man die Rasteranzeige in den Entwicklertools unter Elemente aktiviert. MDNs Grundkonzepte des Rasters fasst Begriffe und Grundoperationen zusammen.

Definieren Sie Spalten mit px, Prozentwerten und fr

.grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}

Dieser Teilcode kann verglichen werden, indem die Spaltendeklarationen innerhalb der .grid-Regel des vollständigen Beispiels ersetzt werden. Die erste Spalte verwendet 160px, und die zweite Spalte nutzt den verbleibenden Platz. fr ist ein Bruch, der den verbleibenden Platz nach Berücksichtigung anderer Tracks und Lücken nach einem Verhältnis aufteilt. Das Fixieren der ersten Spalte ohne Rücksicht auf den Inhalt kann den Hauptbereich auf schmalen Bildschirmen zu schmal machen, daher sollte dies basierend auf dem tatsächlichen Inhalt beurteilt werden.

In einem Container mit einer Breite von 640px, wenn der Abstand 16px beträgt und die beiden Spalten 1fr·2fr sind, beträgt der zu verteilende Platz 624px. Wenn keine Mindestgrößenbeschränkung vorliegt, ist die erste Spalte 208px und die zweite Spalte 416px. Das vollständige Beispiel verwendet minmax(0, 1fr) minmax(0, 2fr), um sicherzustellen, dass die Mindestbreite der Track aufgrund ihres Inhalts nicht signifikant festgelegt wird.

Wenn Sie 50% 50% und gap: 16px zusammen verwenden, kann die Breite des Containers möglicherweise bereits nur mit den Spalten gefüllt sein, und dann kann der Abstand zum Überlaufen hinzugefügt werden. Für flexible Spalten ist fr deshalb oft geeigneter. Das bedeutet nicht, dass alle Spalten dasselbe Verhältnis haben müssen. Ihre Liste benötigt möglicherweise eine kleine Namensspalte und eine große Beschreibungs-Spalte, und Sie möchten möglicherweise auch eine Kombination aus festen und flexiblen Spalten verwenden.

Vergleichen Sie explizite und implizite Reihen

grid-template-rows: 80px definiert explizit eine erste Reihe. Wenn nicht genügend Reihen vorhanden sind, um das Element dahinter zu platzieren, wird eine implizite Reihe erstellt, deren Größe mit grid-auto-rows angepasst werden kann. Das Erstellen von zwei Spalten beschränkt Sie nicht auf zwei Reihen.

Verwenden Sie eine feste Reihe, wenn eine klare Größenanforderung besteht, lassen Sie jedoch erklärende Karten zusätzliche Zeilen aus Übersetzungen oder vergrößertem Text aufnehmen. minmax(100px, auto) legt ein Minimum fest und erlaubt Wachstum; es erfordert nicht, dass alle Reihen identische Höhen haben. Jede Reihe hängt von ihrem Inhalt und den Layoutbedingungen ab. Für weitere Details siehe die MDN-Referenz zu impliziten Zeilen und grid-auto-rows sehen.

Platzieren Sie Elemente mit Linien und Spannen

.feature {
  grid-column: 1 / -1;
}
/* Different representations spanning two columns in the same two-column explicit grid */
/* .feature { grid-column: span 2; } */

1 / -1 bedeutet von der ersten bis zur letzten Linie des expliziten Grids. Es eignet sich für Titel oder hervorgehobene Bereiche, die die gesamte Breite des expliziten Grids einnehmen, egal ob es eine Zwei-Spalten- oder Ein-Spalten-Struktur ist. Negative Liniennummern werden relativ zum Ende des expliziten Grids gezählt und stellen nicht das Ende aller automatisch generierten Tracks dar. Wie man die Anzahl und die Mindestgröße wiederholender Spalten anpasst, wird verglichen in CSS Grid: repeat, auto-fit, auto-fill und Areas.

span 2 bedeutet, dass zwei Tracks eingenommen werden, und wenn keine genaue Startlinie angegeben wird, bestimmt die automatische Platzierung die Position. Auf mobilen Geräten, wenn nur eine Spalte vorhanden ist und weiterhin span 2 verwendet wird, könnte eine unbeabsichtigte zusätzliche Spalte entstehen. Wenn Sie die volle Breite beibehalten möchten, verwenden Sie 1 / -1 oder geben Sie den Span-Wert auf mobil erneut an. Wenn Sie die Platzierungsspezifikationen minimieren, werden alle verbleibenden Elemente standardmäßig in leere Zellen in HTML-Reihenfolge gesetzt.

Führen Sie das vollständige Grid-Beispiel aus

Speichern Sie den untenstehenden Code als grid-basics.html und öffnen Sie ihn. A und B werden in der ersten festen Reihe platziert, C belegt in einer impliziten Zeile beide Spalten, und D und E werden in der nächsten automatischen Reihe platziert. Bei 480px oder weniger werden die Spalten zu einer und C nimmt weiterhin die volle Breite ein.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-basics.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; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 grid-template-rows: 80px; grid-auto-rows: minmax(100px, auto); gap: 16px;
 width: min(100%, 640px); }
 .grid > div { min-width: 0; padding: 12px; background: #dceefa; overflow-wrap: anywhere; }
 .feature { grid-column: 1 / -1; }
 @media (max-width: 480px) { .grid { grid-template-columns: minmax(0, 1fr); } }
  </style>
</head>
<body>
<h1>Column proportions and row heights</h1>
<div class="grid"><div>A: first row</div><div>B: first row</div><div class="feature">C: Area that occupies two columns. As the content grows, the height of this auto-row also increases.</div><div>D: next line</div><div>E: This card has a long description. The height you need will vary depending on the length of your content. Instead of forcing all content to fit at a fixed height, set it to accommodate content beyond the minimum height.</div></div>
</body>
</html>

1. Auf breiten Bildschirmen stellen Sie sicher, dass die .grid-Breite 640px beträgt und aktivieren Sie "Show Grid" in den Entwickler-Tools. Die Spalten sind 208px·416px, und der Abstand zwischen ihnen beträgt 16px. Wenn Sie das Spaltenverhältnis auf 1fr·1fr ändern, beträgt jede 312px. Nach dem Vergleich wird es wieder auf 1fr·2fr zurückgesetzt.
2. Die erste Reihe hat eine Höhe von 80px. Wenn Sie mehrere Textzeilen innerhalb von A hinzufügen, bleibt die Höhe der Reihe selbst gleich und der Inhalt kann überlaufen. Wenn Sie den Text in den Originalzustand zurückversetzen und grid-template-rows auf minmax(80px, auto) ändern, kann sie je nach Inhalt wachsen.
3. Erhöhen Sie den Inhalt von C ausreichend. grid-auto-rows ist minmax(100px, auto), sodass die Zeilen größer als 100px sein können. Ändern Sie nur grid-auto-rows auf 100px und beobachten Sie den Unterschied bei festen Zeilen, dann setzen Sie ihn wieder auf den ursprünglichen Wert zurück.
4. Wenn Sie nur die grid-column-Deklaration von C entfernen, wird C in einer Zelle platziert und die Position der dahinterliegenden Elemente ändert sich ebenfalls. Stellen Sie 1/-1 wieder her. Verengen Sie den Bildschirm auf 480px oder weniger, um zu sehen, ob die Gesamtausbreitung in einer Spalte beibehalten wird.

Behandeln Sie lange Inhalte auf schmalen Bildschirmen

Die 1fr-Track eines Grids kann durch lange Zeichenketten breit gezogen werden, aufgrund ihrer standardmäßigen automatischen Mindestgröße. minmax(0, 1fr) ist eine Methode, die Mindestgröße der Track auf 0 zu setzen, und tatsächliche Zeilenumbrüche in der Zeichenkette erfordern separate Regeln. min-width: 0 wird je nach Situation auch auf das Element selbst angewendet. Speichern Sie den folgenden Code als grid-long-text.html. Wenn Elemente über die Spalte hinauslaufen, überprüfen Sie Überlauf, lange Zeichenfolgen und Auslassungszeichen für Regeln zum Zeilenumbruch langer Zeichenketten.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-long-text.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; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
 width: min(100%, 600px); }
 .grid > div { padding: 12px; background: #e8f5de; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Grid minimum size and long strings</h1><div class="grid"><div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div><div>A description of ordinary length</div></div>
</body>
</html>

1. Ändern Sie nur overflow-wrap auf normal, um zu bestätigen, dass Buchstaben überlaufen können, selbst wenn die Trackbreite beibehalten wird.
2. Wenn Sie beide Spalten durch 1fr 1fr ersetzen, können Sie sehen, wie die Mindestgröße eines langen Strings die Spaltenverteilung beeinflusst. Nach dem Vergleich stellen Sie sowohl minmax(0, 1fr) als auch anywhere wieder her.

Wählen Sie einen responsiven Übergangspunkt basierend auf der tatsächlichen Lesebreite des Inhalts und nicht nach dem Gerätenamen. Die 480px in diesem Beispiel sind eine Lernwahl und kein Standard für alle Grids. Sie können den Bildschirm verkleinern und in den Text hineinzoomen, um feste Linien, lange Strings und zusätzliche Spalten, die durch Spans erstellt wurden, zu sehen, um die Ursache des Überlaufs zu isolieren.