Raster

The CSS Podcast – 011: Grid

Ein sehr häufiges Layout im Webdesign ist ein Layout mit Kopfzeile, Seitenleiste, Textbereich und Fußzeile.

Im Laufe der Jahre gab es viele Methoden, dieses Layout zu lösen. Mit CSS-Rastern ist es jedoch nicht nur relativ einfach, sondern Sie haben auch viele Optionen. Raster eignen sich hervorragend, um die Kontrolle, die die externe Größenanpassung bietet, mit der Flexibilität der internen Größenanpassung zu kombinieren. Das macht sie ideal für diese Art von Layout. Das liegt daran, dass das Raster eine Layoutmethode für zweidimensionale Inhalte ist. Das bedeutet, dass Elemente gleichzeitig in Zeilen und Spalten angeordnet werden.

Beim Erstellen eines Rasterlayouts definieren Sie ein Raster mit Zeilen und Spalten. Anschließend platzieren Sie Elemente in diesem Raster oder lassen Sie sie automatisch vom Browser in den von Ihnen erstellten Zellen platzieren. Raster haben viele Vorteile. Mit einem Überblick über die verfügbaren Optionen können Sie im Handumdrehen Rasterlayouts erstellen.

Übersicht

Was können Sie also mit dem Raster tun? Rasterlayouts haben folgende Funktionen: In diesem Leitfaden erfahren Sie mehr darüber.

1. Ein Raster kann mit Zeilen und Spalten definiert werden. Sie können die Größe dieser Zeilen- und Spaltentracks festlegen oder sie können auf die Größe der Inhalte reagieren.
2. Direkte untergeordnete Elemente des Rastercontainers werden automatisch in dieses Raster eingefügt.
3. Sie können die Elemente auch an der gewünschten Stelle platzieren.
4. Linien und Bereiche im Raster können benannt werden, um das Platzieren zu erleichtern.
5. Der freie Platz im Rastercontainer kann auf die Tracks verteilt werden.
6. Rasterelemente können innerhalb ihres Bereichs ausgerichtet werden.

Rasterterminologie

Grid bringt eine Reihe neuer Begriffe mit sich, da es das erste Mal ist, dass CSS ein echtes Layoutsystem hat.

Rasterlinien

Ein Raster besteht aus horizontalen und vertikalen Linien. Wenn Ihr Raster vier Spalten hat, enthält es fünf Spaltenlinien, einschließlich der Linie nach der letzten Spalte.

Die Zeilen sind ab 1 nummeriert. Die Nummerierung folgt dem Schreibmodus und der Schriftrichtung der Komponente. In einer linksläufigen Sprache wie Deutsch ist also Spalte 1 links und in einer rechtsläufigen Sprache wie Arabisch rechts zu sehen.

Rastertracks

Ein Gleis ist der Raum zwischen zwei Rasterlinien. Ein Zeilen-Track befindet sich zwischen zwei Zeilenlinien und ein Spalten-Track zwischen zwei Spaltenlinien. Beim Erstellen des Rasters erstellen wir diese Tracks, indem wir ihnen eine Größe zuweisen.

Rasterzelle

Eine Rasterzelle ist der kleinste Bereich in einem Raster, der durch die Schnittmenge von Zeilen- und Spaltenspuren definiert wird. Das ist genau wie bei einer Tabellenzelle oder einer Zelle in einer Tabellenkalkulation. Wenn Sie ein Raster definieren und keine Elemente platzieren, wird automatisch ein Element in jeder definierten Rasterzelle platziert.

Rasterfläche

Mehrere Rasterzellen zusammen. Rasterbereiche werden erstellt, indem ein Element über mehrere Spuren hinweg erstreckt wird.

Lücken

Ein Rinnstein oder eine Gasse zwischen den Gleisen. Sie verhalten sich bei der Größenanpassung wie ein normaler Titel. Sie können keine Inhalte in Lücken platzieren, aber Sie können Rasterelemente über sie hinweg spannen.

Rastercontainer

Das HTML-Element, auf das display: grid angewendet wird, und das daher einen neuen Rasterformatierungskontext für die direkten untergeordneten Elemente erstellt.

.container {
  display: grid;
}

Rasterelement

Ein Rasterelement ist ein Element, das direkt dem Rastercontainer untergeordnet ist.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Zeilen und Spalten

Um ein einfaches Raster zu erstellen, können Sie ein Raster mit drei Spalten-Tracks, zwei Zeilen-Tracks und einem Abstand von 10 Pixeln zwischen den Tracks wie unten beschrieben definieren.

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

Dieses Raster veranschaulicht viele der im Abschnitt zur Terminologie beschriebenen Dinge. Es hat drei Spaltenspuren. Für jeden Track wird eine andere Längeneinheit verwendet. Es hat zwei Zeilenspuren, eine mit einer Längeneinheit und die andere automatisch. Wenn „auto“ als Spurgröße verwendet wird, kann davon ausgegangen werden, dass sie so groß ist wie der Inhalt. Die Größe der Titel wird standardmäßig automatisch angepasst.

Wenn das Element mit der Klasse .container untergeordnete Elemente hat, werden diese sofort in diesem Raster angeordnet. In der Demo unten können Sie sich das ansehen.

Das Raster-Overlay in den Chrome-Entwicklertools kann Ihnen dabei helfen, die verschiedenen Teile des Rasters zu verstehen.

Öffnen Sie die Demo in Chrome. Sehen Sie sich das Element mit dem grauen Hintergrund an, das die ID container hat. Markieren Sie das Raster, indem Sie im DOM neben dem Element .container das Rastersymbol auswählen. Wählen Sie auf dem Tab „Layout“ im Drop-down-Menü die Option Zeilennummern anzeigen aus, um die Zeilennummern im Raster zu sehen.

Ein in den Chrome-Entwicklertools hervorgehobenes Raster mit Zeilennummern, Zellen und Tracks.

Keywords mit automatischer Größenanpassung

Zusätzlich zu den Längen- und Prozentdimensionen, die im Abschnitt Größeneinheiten beschrieben wurden, können für Rastertracks auch Keywords zur benutzerdefinierten Größenanpassung verwendet werden. Diese Keywords sind in der Box Sizing-Spezifikation definiert und bieten zusätzliche Methoden zum Festlegen der Größe von Boxen in CSS, nicht nur für Rastertracks.

• min-content
• max-content
• fit-content()

Mit dem Keyword min-content wird ein Track so klein wie möglich, ohne dass der Inhalt des Tracks überläuft. Wenn Sie das Beispiel-Rasterlayout in drei Spalten mit der Größe min-content ändern, werden sie so schmal wie das längste Wort im Track.

Das Keyword max-content hat den gegenteiligen Effekt. Der Track wird so breit, dass alle Inhalte in einem langen, durchgehenden String angezeigt werden. Dies kann zu Überläufen führen, da der String nicht umgebrochen wird.

Die Funktion fit-content() verhält sich zuerst wie max-content. Sobald der Titel jedoch die Größe erreicht, die Sie in die Funktion übergeben, wird der Text umgebrochen. Mit fit-content(10em) wird also ein Track erstellt, der kleiner als 10 em ist, wenn die Größe von max-content kleiner als 10 em ist, aber niemals größer als 10 em.

In der nächsten Demo können Sie die verschiedenen Keywords für die intrinsische Größenanpassung ausprobieren, indem Sie die Größe der Rastertracks ändern.

Hinweis : In dieser Demo sehen Sie, dass sich die Rasterspalten bei Verwendung von „auto“ so dehnen, dass sie den Container füllen. Automatisch skalierte Tracks werden standardmäßig gedehnt, wenn im Rastercontainer zusätzlicher Platz vorhanden ist.

Die fr-Einheit

Es gibt bereits Längendimensionen, Prozentsätze und diese neuen Keywords. Es gibt auch eine spezielle Methode zum Ändern der Größe, die nur im Rasterlayout funktioniert. Dies ist die Einheit fr, eine flexible Länge, die einen Anteil des verfügbaren Platzes im Rastercontainer beschreibt.

Die Einheit fr funktioniert ähnlich wie flex: auto in Flexbox. Er verteilt den Raum nach der Layoutierung der Elemente. So erhalten Sie drei Spalten, die alle denselben Anteil am verfügbaren Platz erhalten:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Da die fr-Einheit den verfügbaren Bereich aufteilt, kann sie mit einer Lücke oder Tracks mit fester Größe kombiniert werden. Wenn Sie eine Komponente mit einem Element mit fester Größe haben möchten und der zweite Titel den verbleibenden Platz einnehmen soll, können Sie als Titelliste grid-template-columns: 200px 1fr verwenden.

Wenn Sie unterschiedliche Werte für die fr-Einheit verwenden, wird der Platz proportional aufgeteilt. Je größer der Wert, desto mehr des freien Speicherplatzes wird belegt. Ändern Sie in der Demo unten den Wert des dritten Titels.

Die minmax()-Funktion

Browser Support

• 57
• 16
• 52
• 10.1

Source

Mit dieser Funktion können Sie eine Mindest- und eine Maximalgröße für einen Titel festlegen. Das kann sehr nützlich sein. Nehmen wir das Beispiel der fr-Einheit oben, die den verbleibenden Speicherplatz verteilt. Sie könnte mit minmax() als minmax(auto, 1fr) geschrieben werden. Beim Raster wird die ursprüngliche Größe der Inhalte berücksichtigt und dann der verfügbare Platz verteilt, nachdem den Inhalten genügend Platz eingeräumt wurde. Das bedeutet, dass die einzelnen Tracks möglicherweise nicht den gleichen Anteil am gesamten im Rastercontainer verfügbaren Platz haben.

Wenn Sie festlegen möchten, dass ein Track einen gleichberechtigten Anteil am Platz im Rastercontainer einnimmt, abzüglich der Lücken, verwenden Sie „minmax“. Ersetzen Sie 1fr als Titelgröße durch minmax(0, 1fr). Dadurch wird die Mindestgröße des Titels zu 0 und nicht zur Mindestgröße der Inhalte. Das Raster nimmt dann die gesamte verfügbare Größe im Container ein, zieht die für Lücken erforderliche Größe ab und teilt den Rest entsprechend den fr-Einheiten auf.

repeat() Notation

Browser Support

• 57
• 16
• 76
• 10.1

Source

Wenn du ein 12-spaltiges Titel-Raster mit gleich großen Spalten erstellen möchtest, kannst du das folgende CSS verwenden.

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

Alternativ können Sie den Befehl repeat() verwenden:

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

Mit der Funktion repeat() kannst du jeden Abschnitt deiner Titelliste wiederholen. Sie können beispielsweise ein Muster aus Tracks wiederholen. Du kannst auch einige reguläre Titel und einen wiederkehrenden Abschnitt haben.

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill und auto-fit

Sie können alles, was Sie über die Größe von Tracks gelernt haben, kombinieren,minmax() wiederholen und so ein nützliches Muster mit Rasterlayout erstellen. Vielleicht möchten Sie die Anzahl der Spaltentracks nicht angeben, sondern so viele erstellen, wie in Ihren Container passen.

Dazu können Sie repeat() und die Keywords auto-fill oder auto-fit verwenden. In der Demo unten werden so viele Tracks mit 200 Pixeln erstellt, wie in den Container passen. Öffnen Sie die Demo in einem neuen Fenster und sehen Sie, wie sich das Raster ändert, wenn Sie die Größe des Darstellungsbereichs ändern.

In der Demo werden so viele Titel wie möglich abgespielt. Die Tracks sind jedoch nicht flexibel. Am Ende entsteht eine Lücke, bis genügend Platz für einen weiteren Track mit 200 Pixeln vorhanden ist. Wenn du die Funktion minmax() hinzufügst, kannst du so viele Tracks anfordern, wie mit einer Mindestgröße von 200 Pixeln und einer maximalen Größe von 1 fr passen. Das Raster legt dann die 200-Pixel-Tracks an und der verbleibende Platz wird gleichmäßig auf sie verteilt.

So wird ein zweidimensionales responsives Layout erstellt, für das keine Media-Abfragen erforderlich sind.

Zwischen auto-fill und auto-fit gibt es einen kleinen Unterschied. In der nächsten Demo wird ein Rasterlayout mit der oben beschriebenen Syntax verwendet, aber nur mit zwei Rasterelementen im Rastercontainer. Mit dem Keyword auto-fill sehen Sie, dass leere Tracks erstellt wurden. Ändern Sie das Keyword in auto-fit, um die Tracks auf eine Größe von 0 zusammenzuziehen. Das bedeutet, dass die flexiblen Tracks jetzt so weit wachsen, dass sie den gesamten verfügbaren Platz einnehmen.

Ansonsten funktionieren die Keywords auto-fill und auto-fit genau gleich. Es gibt keinen Unterschied zwischen ihnen, sobald der erste Track gefüllt ist.

Automatisches Placement

Sie haben die automatische Platzierung von Elementen in den bisherigen Demos bereits gesehen. Die Elemente werden in der Reihenfolge, in der sie in der Quelle erscheinen, im Raster platziert. Für viele Layouts ist das möglicherweise alles, was Sie benötigen. Wenn Sie mehr Kontrolle benötigen, haben Sie mehrere Möglichkeiten. Zuerst können Sie das Layout für die automatische Platzierung anpassen.

Elemente in Spalten platzieren

Im Rasterlayout werden Elemente standardmäßig entlang der Zeilen platziert. Mit grid-auto-flow: column können Sie stattdessen festlegen, dass die Elemente in Spalten eingefügt werden. Sie müssen Zeilenpfade definieren, da die Elemente sonst inhärente Spaltenpfade erstellen und alle in einer langen Zeile anordnen.

Diese Werte beziehen sich auf den Schreibmodus des Dokuments. Eine Zeile verläuft immer in der Richtung, in der ein Satz im Schreibmodus des Dokuments oder der Komponente verläuft. In der nächsten Demo können Sie den Wert von grid-auto-flow und die Eigenschaft writing-mode ändern.

Überlappende Tracks

Sie können festlegen, dass einige oder alle Elemente in einem automatisch platzierten Layout mehr als einen Track umfassen. Verwenden Sie das Schlüsselwort span und die Anzahl der Zeilen, die überspannt werden sollen, als Wert für grid-column-end oder grid-row-end.

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

Da Sie keinen grid-column-start angegeben haben, wird der Anfangswert auto verwendet und das Element wird gemäß den Regeln für die automatische Platzierung platziert. Du kannst das auch mit der Kurzschreibweise grid-column angeben:

.item {
    grid-column: auto / span 2;
}

Lücken schließen

Ein automatisch platziertes Layout mit einigen Elementen, die mehrere Tracks umfassen, kann zu einem Raster mit einigen leeren Zellen führen. Beim Standardverhalten des Rasterlayouts mit einem vollständig automatisch platzierten Layout wird immer vorwärts gegangen. Die Elemente werden in der Reihenfolge platziert, in der sie in der Quelle oder in der Property order angegeben sind. Wenn nicht genügend Platz für ein Element vorhanden ist, lässt das Raster eine Lücke und geht zum nächsten Track über.

In der nächsten Demo wird dieses Verhalten veranschaulicht. Wenn Sie das Kästchen anklicken, wird der Modus für die dichte Verpackung angewendet. Dazu geben Sie für grid-auto-flow den Wert dense an. Mit diesem Wert verwendet das Raster später im Layout Elemente, um Lücken zu füllen. Das kann dazu führen, dass die Anzeige nicht mehr der logischen Reihenfolge entspricht.

Elemente platzieren

Sie haben bereits viele Funktionen von CSS Grid. Sehen wir uns nun an, wie wir Elemente im erstellten Raster positionieren.

Das CSS-Raster-Layout basiert auf einem Raster mit nummerierten Linien. Am einfachsten platzieren Sie Elemente im Raster, indem Sie sie von einer Zeile in eine andere verschieben. In diesem Leitfaden erfahren Sie, wie Sie Elemente auf andere Weise platzieren können. Sie haben jedoch immer Zugriff auf diese nummerierten Linien.

Mit den folgenden Eigenschaften können Sie Elemente anhand der Zeilennummer platzieren:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Sie haben Abkürzungen, mit denen Sie sowohl Start- als auch Endzeilen gleichzeitig festlegen können:

• grid-column
• grid-row

Legen Sie zum Platzieren des Elements die Start- und Endlinien des Rasterbereichs fest, in dem es platziert werden soll.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

In den Chrome DevTools können Sie sich eine visuelle Darstellung der Linien anzeigen lassen, um zu prüfen, wo sich Ihr Element befindet.

Die Zeilennummerierung folgt dem Schreibmodus und der Richtung der Komponente. In der nächsten Demo ändern Sie den Schreibmodus oder die Schreibrichtung, um zu sehen, wie die Platzierung der Elemente dem Textfluss entspricht.

Elemente stapeln

Mit der zeilenbasierten Positionierung können Sie Elemente in dieselbe Zelle des Rasters platzieren. Das bedeutet, dass Sie Elemente stapeln oder einen Artikel teilweise über einen anderen legen können. Elemente, die in der Quelle später kommen, werden über Elementen angezeigt, die früher kommen. Sie können diese Stapelreihenfolge mit z-index ändern, genau wie bei positionierten Elementen.

Negative Zeilennummern

Wenn Sie ein Raster mit grid-template-rows und grid-template-columns erstellen, wird ein sogenanntes explizites Raster erstellt. Dies ist ein Raster, das Sie definiert und den Tracks eine Größe zugewiesen haben.

Manchmal werden Elemente außerhalb dieses expliziten Rasters angezeigt. Sie können beispielsweise Spaltentracks definieren und dann mehrere Zeilen mit Rasterelementen hinzufügen, ohne Zeilentracks zu definieren. Die Titel werden standardmäßig automatisch skaliert. Sie können mit grid-column-end auch ein Element platzieren, das sich außerhalb des explizit definierten Rasters befindet. In beiden Fällen werden vom Raster Tracks erstellt, damit das Layout funktioniert. Diese Tracks werden als implizites Raster bezeichnet.

In den meisten Fällen spielt es keine Rolle, ob Sie mit einem impliziten oder expliziten Raster arbeiten. Bei linienbasierten Placements werden Sie jedoch möglicherweise auf den Hauptunterschied zwischen den beiden stoßen.

Mit negativen Zeilennummern können Sie Elemente ab der Endlinie des expliziten Rasters platzieren. Das kann nützlich sein, wenn ein Element von der ersten bis zur letzten Spaltenzeile reichen soll. In diesem Fall können Sie grid-column: 1 / -1 verwenden. Das Element wird über das gesamte explizite Raster hinweg gestreckt.

Dies funktioniert jedoch nur für das explizite Raster. Angenommen, Sie haben ein Layout mit drei Zeilen automatisch platzierter Elemente, wobei das erste Element bis zur Endlinie des Rasters reichen soll.

Sie könnten denken, dass Sie diesem Artikel grid-row: 1 / -1 geben können. In der Demo unten sehen Sie, dass das nicht funktioniert. Die Tracks werden im impliziten Raster erstellt. Mit -1 kann das Ende des Rasters nicht erreicht werden.

Größe impliziter Tracks festlegen

Die im impliziten Raster erstellten Titel werden standardmäßig automatisch skaliert. Wenn Sie jedoch die Größe der Zeilen steuern möchten, verwenden Sie die Eigenschaft grid-auto-rows und für Spalten grid-auto-columns.

So erstellen Sie alle impliziten Zeilen mit einer Mindestgröße von 10em und einer maximalen Größe von auto:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

Implizite Spalten mit einem Muster aus 100 px und 200 px breiten Tracks erstellen In diesem Fall hat die erste implizite Spalte eine Breite von 100 Pixeln, die zweite 200 Pixel, die dritte 100 Pixel usw.

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

Benannte Gitterlinien

Es kann einfacher sein, Elemente in ein Layout zu platzieren, wenn die Zeilen einen Namen statt einer Nummer haben. Sie können jede Linie im Raster benennen, indem Sie einen beliebigen Namen in eckige Klammern setzen. Es können mehrere Namen hinzugefügt werden, die innerhalb derselben Klammern durch ein Leerzeichen getrennt sind. Nachdem Sie Linien benannt haben, können Sie sie anstelle der Zahlen verwenden.

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

Bereiche der Rastervorlage

Sie können auch Bereiche des Rasters benennen und Elemente in diese benannten Bereiche platzieren. Das ist eine gute Methode, da Sie direkt im CSS sehen können, wie Ihre Komponente aussieht.

Geben Sie zuerst mithilfe der Property grid-area einen Namen für die direkten untergeordneten Elemente Ihres Rastercontainers an:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Der Name kann beliebig sein, darf aber nicht die Keywords auto und span enthalten. Nachdem Sie alle Elemente benannt haben, verwenden Sie die Property grid-template-areas, um zu definieren, welche Rasterzellen die einzelnen Elemente umfassen. Jede Zeile wird in Anführungszeichen definiert.

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Bei der Verwendung von grid-template-areas gelten einige Regeln.

• Der Wert muss ein vollständiges Raster ohne leere Zellen sein.
• Wenn Sie mehrere Titel umfassen möchten, wiederholen Sie den Namen.
• Die durch Wiederholung des Namens erstellten Bereiche müssen rechteckig sein und dürfen nicht voneinander getrennt sein.

Wenn Sie gegen eine der oben genannten Regeln verstoßen, wird der Wert als ungültig behandelt und verworfen.

Wenn Sie Weißraum im Raster lassen möchten, verwenden Sie ein . oder ein Vielfaches davon ohne Leerzeichen dazwischen. Wenn ich beispielsweise die erste Zelle im Raster leer lassen möchte, könnte ich eine Reihe von .-Zeichen hinzufügen:

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

Da das gesamte Layout an einem Ort definiert ist, lässt es sich ganz einfach mithilfe von Medienabfragen neu definieren. Im nächsten Beispiel habe ich ein Layout mit zwei Spalten erstellt, das durch Neudefinition der Werte von grid-template-columns und grid-template-areas in ein Layout mit drei Spalten umgewandelt wird. Öffnen Sie das Beispiel in einem neuen Fenster, um die Darstellungsgröße zu ändern und die Änderungen am Layout zu sehen.

Wie bei anderen Rastermethoden können Sie auch sehen, wie sich die grid-template-areas-Property auf writing-mode und die Richtung bezieht.

Kurzzeicheneigenschaften

Es gibt zwei Kurzschreibweisen, mit denen Sie viele der Rastereigenschaften auf einmal festlegen können. Sie können etwas verwirrend wirken, bis Sie genau wissen, wie sie zusammenpassen. Ob Sie sie verwenden oder lieber Longhands verwenden möchten, liegt ganz bei Ihnen.

grid-template

Browser Support

• 57
• 16
• 52
• 10.1

Source

Das Attribut grid-template ist eine Abkürzung für grid-template-rows, grid-template-columns und grid-template-areas. Die Zeilen werden zuerst definiert, zusammen mit dem Wert von grid-template-areas. Die Spaltengröße wird nach einem / hinzugefügt.

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid Unterkunft

Browser Support

• 57
• 16
• 52
• 10.1

Source

Die Tastenkombination grid kann genau wie die Tastenkombination grid-template verwendet werden. Bei dieser Verwendung werden die anderen zulässigen Rastereigenschaften auf ihre ursprünglichen Werte zurückgesetzt. Der vollständige Satz besteht aus:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

Alternativ können Sie diese Kurzschreibweise verwenden, um das Verhalten des impliziten Rasters zu definieren, z. B.:

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

Ausrichtung

Für das Rasterlayout werden dieselben Ausrichtungseigenschaften verwendet, die Sie im Leitfaden zu Flexbox kennengelernt haben. Im Raster werden die Eigenschaften, die mit justify- beginnen, immer auf der Inline-Achse verwendet. Das ist die Richtung, in der Sätze im Schreibmodus verlaufen.

Die Eigenschaften, die mit align- beginnen, werden auf der Blockachse verwendet. Das ist die Richtung, in der Blöcke im Schreibmodus angeordnet werden.

• justify-content und align-content: Mit diesen Symbolen kannst du zusätzlichen Platz im Rastercontainer um oder zwischen Tracks verteilen.
• justify-self und align-self: Mit diesen Tasten können Sie ein Rasterelement innerhalb des Rasterbereichs, in dem es sich befindet, verschieben.
• justify-items und align-items: werden auf den Rastercontainer angewendet, um alle justify-self-Properties für die Elemente festzulegen.

Zusätzlichen Speicherplatz verteilen

In dieser Demo ist das Raster größer als der Platz, der für die Anordnung der Tracks mit fester Breite erforderlich ist. Das bedeutet, dass wir sowohl in den Inline- als auch in den Blockabmessungen des Rasters Platz haben. Probieren Sie verschiedene Werte für align-content und justify-content aus, um zu sehen, wie sich die Tracks verhalten.

Beachten Sie, dass die Lücken größer werden, wenn Sie Werte wie space-between verwenden. Außerdem wird jedes Rasterelement, das zwei Tracks umfasst, vergrößert, um den zusätzlichen Raum in der Lücke zu absorbieren.

Hinweis : Wie bei Flexbox funktionieren diese Eigenschaften nur, wenn zusätzlicher Platz zum Verteilen vorhanden ist. Wenn die Rastertracks den Container genau ausfüllen, bleibt kein freier Platz.

Inhalte verschieben

Elemente mit einer Hintergrundfarbe füllen den gesamten Rasterbereich aus, in dem sie platziert sind, da der Anfangswert für justify-self und align-self stretch ist.

Hinweis : Wenn es sich bei Ihrem Element um ein Bild oder ein anderes Objekt mit einem inhärenten Seitenverhältnis handelt, wird als Anfangswert start statt stretch festgelegt, damit das Objekt nicht verzerrt wird.

Ändern Sie in der Demo die Werte von justify-items und align-items, um zu sehen, wie sich das Layout dadurch ändert. Die Größe des Rasterbereichs ändert sich nicht. Stattdessen werden die Elemente innerhalb des definierten Bereichs verschoben.

Wissen testen

Ihr Wissen über Raster testen

Welche der folgenden Begriffe beziehen sich auf das CSS-Raster?

Linien

Das Raster wird durch diese horizontal und vertikal laufenden Trennlinien unterteilt.

Kreise

Im CSS-Raster gibt es keine Kreise.

Zellen

Durch die Kreuzung einer Zeile und einer Spalte entsteht eine Rasterzelle.

Gebieten

Mehrere Zellen zusammen.

trainiert

Es gibt keine Züge im CSS-Raster.

Lücken

Der Abstand zwischen Zellen.

Tracks

Eine einzelne Zeile oder Spalte ist ein Track im Raster.

main {
  display: grid;
}

Was ist die Standardlayoutrichtung eines Rasters?

Zeilen

Wenn keine Spalten definiert sind, werden die untergeordneten Elemente des Rasters wie gewohnt in Blockrichtung angeordnet.

Spalten

Wenn grid-auto-flow: column vorhanden ist, wird ein Raster als Spaltenlayout dargestellt.

Was ist der Unterschied zwischen auto-fit und auto-fill?

Bei auto-fit werden die Zellen an den Container angepasst, bei auto-fill nicht.

auto-fill fügt so viele Elemente wie möglich in die Vorlage ein, ohne sie zu strecken. Mit Fit passen sie perfekt.

Mit auto-fit wird ein Container so gedehnt, dass er zu den Kindern passt. Mit auto-fill passen sich die Kinder dem Container an.

Das ist nicht der Fall.

Was ist min-content?

Entspricht 0%

0% ist ein relativer Wert des übergeordneten Felds, während min-content sich auf die Wörter und Bilder im Feld bezieht.

Kleinster Buchstabe

Es gibt zwar einen kleinsten Buchstaben, aber min-content bezieht sich nicht auf Buchstaben.

Das längste Wort oder Bild.

Im Satz „CSS ist super“ ist das Wort „super“ das min-content.

Was ist max-content?

Der längste Satz oder das größte Bild.

Das ist die maximale Größe, die für den Inhalt des Felds angefordert oder angegeben wurde. Es ist der breiteste Satz oder das breiteste Bild.

Der längste Buchstabe.

Es gibt zwar einen längsten Buchstaben, aber max-content bezieht sich nicht auf Buchstaben.

Das längste Wort.

Das längste Wort ist min-content.

Was ist die automatische Platzierung?

Die untergeordneten Elemente werden anhand von Browserheuristiken in die beste Reihenfolge gebracht.

Die Reihenfolge der Inhalte wird nicht vom Browser, sondern nur von Ihren eigenen Stilen geändert.

Wenn untergeordnete Elemente des Rasters eine grid-area zugewiesen und in dieser Zelle platziert wurden.

Das ist ein explizites Placement, kein automatisches Placement.

Wenn nicht zugewiesene Rasterelemente in einer Layoutvorlage nebeneinander platziert werden.

Rasterelemente ohne expliziten Bereich werden in der nächsten verfügbaren Rasterzelle platziert.

Ressourcen

In diesem Leitfaden haben Sie einen Überblick über die verschiedenen Teile der Spezifikation für das Rasterlayout erhalten. Weitere Informationen finden Sie in den folgenden Ressourcen.

• MDN CSS-Rasterlayout
• Ein vollständiger Leitfaden zum Raster
• Rastercontainer erstellen
• CSS-Raster in den Chrome-Entwicklertools prüfen
• Umfassende Sammlung von Lernmaterialien zu Rastern