Raster

The CSS Podcast – 011: Grid

Ein sehr gängiges Layout im Webdesign ist ein Kopf-, Seitenleisten-, Text- und Fußzeilenlayout.

Im Laufe der Jahre gab es viele Methoden, um dieses Layout zu lösen. Das CSS-Raster ist jedoch nicht nur relativ einfach, sondern es gibt auch viele Optionen. Das Raster ist äußerst nützlich, um die Steuerung durch externe Größenanpassung mit der Flexibilität der intrinsischen Größe zu kombinieren. Daher ist es ideal für diese Art von Layout. Das liegt daran, dass Raster eine Layoutmethode für zweidimensionale Inhalte ist. Das heißt, Elemente gleichzeitig in Zeilen und Spalten anzuordnen.

Beim Erstellen eines Rasterlayouts definieren Sie ein Raster mit Zeilen und Spalten. Dann platzieren Sie Elemente im Raster oder lassen sie automatisch in den von Ihnen erstellten Zellen platzieren. Es gibt viel zu Rastern, aber mit einer Übersicht über die verfügbaren Rasterlayouts können Sie im Handumdrehen Rasterlayouts erstellen.

Überblick

Was können Sie also mit Raster machen? Raster-Layouts haben die folgenden Funktionen. In diesem Leitfaden erfahren Sie alles Wissenswerte über diese Funktionen.

1. Ein Raster kann mit Zeilen und Spalten definiert werden. Sie können die Größe dieser Zeilen- und Spalten-Tracks festlegen oder sie können auf die Größe des Inhalts reagieren.
2. Direkte untergeordnete Elemente des Rastercontainers werden automatisch in diesem Raster platziert.
3. Sie können die Elemente aber auch an der gewünschten Position platzieren.
4. Linien und Bereiche im Raster können benannt werden, um die Platzierung zu erleichtern.
5. Freiräume im Rastercontainer können auf die Gleise verteilt werden.
6. Rasterelemente können innerhalb ihres Bereichs ausgerichtet werden.

Rasterterminologie

Grid enthält eine Reihe neuer Begriffe, da CSS zum ersten Mal ein echtes Layoutsystem hat.

Rasterlinien

Ein Raster besteht aus Linien, die horizontal und vertikal verlaufen. Bei vier Spalten hat Ihr Raster fünf Spaltenlinien, darunter die nach der letzten.

Die Zeilen sind beginnend mit 1 nummeriert, wobei die Nummerierung dem Schreibmodus und der Skriptrichtung der Komponente entspricht. Das bedeutet, dass Spalte 1 in einer linksläufigen Sprache (z. B. Englisch) und rechts in einer linksläufigen Sprache (z. B. Arabisch) angezeigt wird.

Rastertracks

Eine Spur ist der Abstand zwischen zwei Rasterlinien. Ein Zeilentrack befindet sich zwischen zwei Zeilenlinien und ein Spaltentrack zwischen zwei Spaltenzeilen. Wenn wir unser Raster erstellen, erstellen wir diese Tracks, indem wir ihnen eine Größe zuweisen.

Rasterzelle

Eine Rasterzelle ist der kleinste Raum in einem Raster, der durch den Schnittpunkt von Zeilen- und Spaltenspuren definiert wird. Er ist mit einer Tabellenzelle oder einer Zelle in einer Tabellenkalkulation identisch. Wenn Sie ein Raster definieren und keines der Elemente einfügen, wird automatisch ein Element in jeder definierten Rasterzelle angeordnet.

Rasterbereich

Mehrere Rasterzellen zusammen. Rasterbereiche werden erstellt, indem ein Element über mehrere Tracks verteilt wird.

Lücken

Ein Spaltenabsatz oder eine Gasse zwischen den Tracks. Zur Größenbestimmung funktionieren sie wie ein normaler Track. Sie können keine Inhalte in einer Lücke platzieren, aber Sie können Rasterelemente über die Lücke erstrecken.

Rastercontainer

Das HTML-Element, auf das display: grid angewendet wurde. Dadurch wird ein neuer Rasterformatierungskontext für die direkt untergeordneten Elemente erstellt.

.container {
  display: grid;
}

Rasterelement

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

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

Zeilen und Spalten

Um ein Grundraster zu erstellen, können Sie ein Raster mit drei Spaltenspuren, zwei Zeilenspuren und einem Abstand von 10 Pixeln zwischen den Tracks wie folgt definieren.

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

Diese Matrix zeigt viele der Dinge, die im Abschnitt „Terminologie“ beschrieben werden. Es hat drei Spaltenspuren. Für jeden Titel wird eine andere Längeneinheit verwendet. Sie hat zwei Zeilenspuren, eine mit einer Längeneinheit und die andere mit automatischer. Bei der Verwendung als Titel-Größenanpassung kann man sich den Wert im Hinblick auf die Größe des Inhalts ansehen. Die Größe von Tracks wird standardmäßig automatisch angepasst.

Wenn das Element mit der Klasse .container untergeordnete Elemente hat, werden diese sofort in diesem Raster angeordnet. Ein Beispiel dafür sehen Sie in der Demo unten.

Mithilfe des Raster-Overlays in den Chrome-Entwicklertools können Sie die verschiedenen Teile des Rasters besser verstehen.

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

Intrinsische Keywords für die Größenanpassung

Zusätzlich zu den im Abschnitt zu Größeneinheiten beschriebenen Dimensionen für Länge und Prozentsatz können Rasterspuren eigene Keywords für die Größenbestimmung verwenden. Diese Schlüsselwörter sind in der Box-Größenspezifikation definiert und fügen zusätzliche Methoden zur Größenanpassung von Boxen in CSS hinzu, nicht nur Rasterspuren.

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

Mit dem Schlüsselwort min-content wird ein Track so klein wie möglich erstellt, ohne dass der Titelinhalt überläuft. Wenn Sie das Beispielrasterlayout so ändern, dass drei Spaltentitel mit der Größe min-content vorhanden sind, werden sie so schmal wie das längste Wort im Track.

Das Schlüsselwort max-content hat den gegenteiligen Effekt. Der Titel wird so breit genug, dass der gesamte Inhalt in einem langen String ohne Zeilenumbruch angezeigt wird. 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 Track jedoch die Größe erreicht, die Sie der Funktion übergeben, wird der Inhalt umgebrochen. Daher erstellt fit-content(10em) einen Track, der kleiner als 10 em ist, wenn die Größe von max-content kleiner als 10 em, aber nie größer als 10 em ist.

Probieren Sie in der nächsten Demo die verschiedenen Keywords für die Größenanpassung aus, indem Sie die Größe der Rastertracks ändern.

Die fr-Einheit

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

Die fr-Einheit funktioniert ähnlich wie die Verwendung von flex: auto in der Flexbox. Sie verteilt die Fläche nach dem Aufstellen der Gegenstände. Daher erhalten Sie drei Spalten, die alle denselben Anteil des verfügbaren Platzes erhalten:

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

Da sich die fr-Einheit den verfügbaren Platz teilt, kann sie mit einer festen Größe oder Tracks mit fester Größe kombiniert werden. Wenn eine Komponente mit einem Element fester Größe vorhanden ist und der zweite Track den verbleibenden Platz einnimmt, können Sie die Tracklist grid-template-columns: 200px 1fr als Tracklist verwenden.

Bei Verwendung unterschiedlicher Werte für die Einheit „fr“ wird das Leerzeichen proportional verwendet. Größere Werte erhalten mehr freien Platz. Ändern Sie in der Demo unten den Wert des dritten Titels.

Die minmax()-Funktion

Mit dieser Funktion können Sie eine Mindest- und eine Höchstgröße für einen Titel festlegen. Das kann sehr nützlich sein. Wenn wir das Beispiel der fr-Einheit nehmen, die den verbleibenden Speicherplatz verteilt, könnte sie mit minmax() als minmax(auto, 1fr) ausgeschrieben werden. Das Raster prüft die intrinsische Größe des Inhalts und verteilt dann den verfügbaren Platz, nachdem dem Inhalt genügend Platz eingeräumt wurde. Dies bedeutet, dass Sie möglicherweise nicht alle Tracks erhalten, die den gleichen Anteil am gesamten verfügbaren Platz im Rastercontainer haben.

Um zu erzwingen, dass ein Track den gleichen Anteil des Platzes im Rastercontainer abzüglich der Lücken einnimmt, verwenden Sie minmax. Ersetzen Sie 1fr als Titelgröße durch minmax(0, 1fr). Dadurch wird die Mindestgröße des Titels auf 0 gesetzt und nicht die Mindestgröße. Das Raster nimmt dann die gesamte verfügbare Größe im Container ein, zieht die für eventuelle Lücken benötigte Größe ab und teilt den Rest entsprechend Ihren fr-Einheiten auf.

repeat()-Notation

Wenn Sie ein Track-Raster mit 12 Spalten und identischen Spalten erstellen möchten, können Sie 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);
}

Sie können sie auch mit repeat() ausschreiben:

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

Mit der Funktion repeat() können Sie beliebige Abschnitte Ihrer Titelauflistung wiederholen. Du kannst zum Beispiel ein Muster von Tracks wiederholen. Sie können auch einige reguläre Titel und einen sich wiederholenden 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ößenbestimmung von Tracks, minmax() und Wiederholung gelernt haben, kombinieren, um ein nützliches Muster mit Rasterlayout zu erstellen. Vielleicht möchten Sie nicht die Anzahl der Spaltenspuren angeben, sondern so viele erstellen, wie in den Container passen.

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

In der Demo sehen wir uns so viele Titel an, wie passen. Die Tracks sind jedoch nicht flexibel. Am Ende entsteht eine Lücke, bis ausreichend Platz für einen weiteren 200-Pixel-Track ist. Mit der Funktion minmax() können Sie so viele Tracks anfordern, wie es mit einer Mindestgröße von 200 Pixeln und einem Maximum von 1 fr. Dann legt das Raster die 200-Pixel-Tracks fest und der übrige Platz wird gleichmäßig darauf verteilt.

So entsteht ein zweidimensionales responsives Layout, ohne dass Medienabfragen erforderlich sind.

Es gibt einen kleinen Unterschied zwischen auto-fill und auto-fit. In der nächsten Demo spielen Sie ein Rasterlayout mit der oben beschriebenen Syntax, aber mit nur zwei Rasterelementen im Rastercontainer. Anhand des Keywords auto-fill können Sie sehen, dass leere Tracks erstellt wurden. Wenn Sie das Keyword in auto-fit ändern, werden die Tracks auf die Größe 0 minimiert. Das bedeutet, dass die flexiblen Tracks jetzt größer werden und den verfügbaren Platz belegen.

Die Keywords auto-fill und auto-fit verhalten sich ansonsten auf die gleiche Weise. Sobald der erste Track ausgefüllt ist, gibt es keinen Unterschied.

Automatisches Placement

Sie haben die automatische Rasterplatzierung bereits in den Demos gesehen. Elemente werden pro Zelle in der Reihenfolge, in der sie in der Quelle angezeigt werden, im Raster platziert. Für viele Layouts ist dies möglicherweise alles, was Sie benötigen. Wenn du mehr Kontrolle benötigst, gibt es einige Möglichkeiten, wie du das automatische Placement optimieren kannst.

Elemente in Spalten platzieren

Beim Rasterlayout werden standardmäßig Elemente entlang der Zeilen platziert. Sie können stattdessen festlegen, dass die Elemente mit grid-auto-flow: column in Spalten platziert werden. Sie müssen Zeilen-Tracks definieren, da die Elemente sonst intrinsische Spalten-Tracks erstellen und das gesamte Layout in einer langen Zeile darstellen.

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 ausgeführt wird. In der nächsten Demo können Sie den Modus den Wert von grid-auto-flow und das Attribut writing-mode ändern.

Mehrere Titel

Sie können festlegen, dass einige oder alle Elemente in einem automatisch platzierten Layout mehr als einen Track umfassen. Verwenden Sie das Keyword span plus die Anzahl der zu erstreckenden Zeilen 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-Wert angegeben haben, wird hierfür der Anfangswert von auto verwendet und gemäß den Regeln für die automatische Platzierung platziert. Sie können dasselbe auch mit der Kurzschreibweise grid-column angeben:

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

Lücken füllen

Ein automatisch platziertes Layout mit einigen Elementen, die sich über mehrere Spuren erstrecken, kann zu einem Raster mit einigen nicht gefüllten Zellen führen. Beim Rasterlayout mit vollständig automatisch platziertem Layout wird standardmäßig immer vorwärts weitergeleitet. Die Elemente werden entsprechend der Reihenfolge in der Quelle oder nach einer Änderung des Attributs order platziert. Wenn nicht genügend Platz für ein Element vorhanden ist, bleibt eine Lücke und das Raster schließt den Weg zur nächsten Spur.

In der nächsten Demo sehen Sie dieses Verhalten. Durch das Kästchen wird der Modus für dichte Verpackung angewendet. Dies wird aktiviert, indem grid-auto-flow den Wert dense zugewiesen wird. Wenn dieser Wert vorhanden ist, nutzt das Raster Elemente später im Layout und verwendet sie, um Lücken zu füllen. Dies kann bedeuten, dass die Anzeige von der logischen Reihenfolge getrennt wird.

Elemente platzieren

Das CSS Grid bietet bereits viele Funktionen. Schauen wir uns nun an, wie wir Elemente in dem erstellten Raster positionieren.

Zunächst einmal ist zu beachten, dass das CSS-Grid-Layout auf einem Raster aus nummerierten Linien basiert. Die einfachste Möglichkeit, Elemente im Raster zu platzieren, besteht darin, sie von einer Linie zur anderen zu platzieren. In diesem Leitfaden finden Sie andere Möglichkeiten zum Platzieren von Elementen, aber Sie haben immer Zugriff auf diese nummerierten Zeilen.

Folgende Eigenschaften können Sie verwenden, um Elemente nach Zeilennummer zu platzieren:

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

Sie verfügen über Kurzschreibweisen, mit denen Sie Start- und Endzeilen gleichzeitig festlegen können:

• grid-column
• grid-row

Um Ihr Element zu platzieren, legen Sie 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-Entwicklertools finden Sie eine visuelle Darstellung der Linien, mit denen Sie überprüfen können, wo Ihr Artikel platziert wird.

Die Zeilennummerierung richtet sich nach dem Schreibmodus und der Richtung der Komponente. Ändern Sie in der nächsten Demo den Schreibmodus oder die Schreibrichtung, um zu sehen, wie die Elemente in derselben Position wie der Text platziert werden.

Elemente stapeln

Mithilfe der zeilenbasierten Positionierung können Sie Elemente in derselben Zelle des Rasters platzieren. Das heißt, Sie können Elemente stapeln oder dafür sorgen, dass ein Element sich teilweise überschneidet. Elemente, die später in der Quelle erscheinen, werden über den früheren Elementen angezeigt. Sie können diese Stapelreihenfolge wie bei positionierten Elementen mithilfe von z-index ändern.

Negative Zeilenzahlen

Wenn Sie ein Raster mit grid-template-rows und grid-template-columns erstellen, erstellen Sie ein sogenanntes explizites Raster. Dies ist ein von Ihnen definiertes Raster und die Größe der Tracks.

Manchmal gibt es Elemente, die außerhalb dieses expliziten Rasters angezeigt werden. Sie können beispielsweise Spaltenspuren definieren und dann mehrere Zeilen mit Rasterelementen hinzufügen, ohne Zeilenspuren zu definieren. Die Größe der Tracks wird standardmäßig automatisch angepasst. Mit grid-column-end können Sie auch ein Element platzieren, das außerhalb des expliziten Rasters liegt. In beiden Fällen erstellt das Raster Tracks, damit das Layout funktioniert. Diese Tracks werden als implizites Raster bezeichnet.

Meistens macht es keinen Unterschied, ob Sie mit einem impliziten oder expliziten Raster arbeiten. Beim zeilenbasierten Placement kann jedoch der Hauptunterschied zwischen den beiden auftreten.

Mit negativen Zeilennummern können Sie Elemente ab der Endzeile des expliziten Rasters platzieren. Dies 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 explizite Raster hinausgebreitet.

Dies funktioniert jedoch nur für das explizite Raster. Nehmen Sie ein Layout mit drei Zeilen automatisch platzierter Elemente, in denen sich das erste Element bis zur Endzeile des Rasters erstrecken soll.

Vielleicht denken Sie, dass Sie diesem Element grid-row: 1 / -1 geben können. In der Demo unten können Sie sehen, dass dies nicht funktioniert. Die Tracks werden im impliziten Raster erstellt. Es gibt keine Möglichkeit, das Ende des Rasters mit -1 zu erreichen.

Größe von impliziten Tracks anpassen

Die Größe der im impliziten Raster erstellten Tracks wird standardmäßig automatisch angepasst. Wenn Sie jedoch die Größe der Zeilen steuern möchten, verwenden Sie das Attribut grid-auto-rows und für die 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);
}

Zum Erstellen impliziter Spalten mit einem Muster von 100 Pixeln und 200 Pixel breiten Tracks. In diesem Fall ist die erste implizite Spalte 100 Pixel, die zweite 200 Pixel, die dritte 100 Pixel usw.

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

Benannte Rasterlinien

Es ist einfacher, Elemente in einem Layout zu platzieren, wenn die Zeilen über einen Namen statt über eine Zahl verfügen. Sie können jede Zeile in Ihrem Raster benennen, indem Sie einen Namen Ihrer Wahl in eckigen Klammern hinzufügen. Es können mehrere Namen hinzugefügt werden, die durch ein Leerzeichen in denselben Klammern getrennt sind. Benannte Zeilen können anstelle der Zahlen verwendet werden.

.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*/
}

Rastervorlagenbereiche

Sie können auch Bereiche des Rasters benennen und Elemente in diesen benannten Bereichen platzieren. Mit dieser Methode können Sie direkt im CSS sehen, wie Ihre Komponente aussieht.

Geben Sie den direkt untergeordneten Elementen des Rastercontainers zuerst mithilfe des Attributs grid-area einen Namen:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

Sie können einen beliebigen Namen festlegen, der über die Keywords auto und span hinausgeht. Sobald alle Elemente benannt sind, definieren Sie mit der Eigenschaft grid-template-areas, welche Rasterzellen die einzelnen Elemente umfassen. Jede Zeile wird in Anführungszeichen gesetzt.

.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.
• Wiederhole den Namen, um mehrere Tracks zu umfassen.
• Die durch die Wiederholung des Namens erstellten Bereiche müssen rechteckig sein und dürfen nicht getrennt werden.

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

Wenn Sie Leerraum im Raster lassen möchten, verwenden Sie . oder mehrere Leerzeichen ohne Leerzeichen dazwischen. Um beispielsweise die erste Zelle im Raster leer zu lassen, 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 Ihr gesamtes Layout an einem Ort definiert ist, ist es einfach, es mithilfe von Medienabfragen neu zu definieren. Im nächsten Beispiel habe ich ein Layout mit zwei Spalten erstellt, das zu drei Spalten wechselt, indem ich die Werte von grid-template-columns und grid-template-areas neu definiert habe. Öffnen Sie das Beispiel in einem neuen Fenster, um mit der Größe des Darstellungsbereichs zu experimentieren und die Layoutänderung zu sehen.

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

Kurzschreibweise-Eigenschaften

Es gibt zwei Kurzeigenschaften, mit denen Sie viele Rastereigenschaften auf einmal festlegen können. Diese können etwas verwirrend wirken, bis Sie genau aufschlüsseln, wie sie zusammen funktionieren. Du entscheidest, ob du sie verwenden möchtest oder ob du lieber Langhand verwenden möchtest.

grid-template

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

Die Kurzschreibweise grid kann auf die gleiche Weise wie die Kurzschreibweise grid-template verwendet werden. Bei dieser Verwendung werden die anderen akzeptierten Rastereigenschaften auf ihre ursprünglichen Werte zurückgesetzt. Alle Funktionen umfassen:

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

Alternativ können Sie diese Abkürzung verwenden, um das Verhalten des impliziten Rasters zu definieren. Beispiel:

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

Ausrichtung

Für das Rasterlayout werden dieselben Ausrichtungseigenschaften verwendet, die Sie in der Anleitung für Flexbox kennengelernt haben. Im Raster werden die Eigenschaften, die mit justify- beginnen, immer auf der Inline-Achse verwendet, d. h. der Richtung, in der Sätze in Ihrem Schreibmodus ausgeführt werden.

Die Eigenschaften, die mit align- beginnen, werden für die Blockachse verwendet, d. h. die Richtung, in der Blöcke im Schreibmodus angeordnet werden.

• justify-content und align-content: Verteilen zusätzlichen Platz im Rastercontainer auf oder zwischen Tracks.
• justify-self und align-self werden auf ein Rasterelement angewendet, um es innerhalb des Rasterbereichs zu verschieben, in dem es platziert wird.
• justify-items und align-items werden auf den Rastercontainer angewendet, um alle justify-self-Eigenschaften der Elemente festzulegen.

Zusätzlichen Speicherplatz verteilen

In dieser Demo ist das Raster größer als der Platz, der zum Auslegen der Schienen mit fester Breite erforderlich ist. Das bedeutet, dass sowohl in den Inline- als auch in den Blockdimensionen des Rasters Platz ist. Probieren Sie verschiedene Werte von align-content und justify-content aus, um zu sehen, wie sich die Tracks verhalten.

Beachten Sie, wie die Lücken bei Verwendung von Werten wie space-between größer werden und jedes Rasterelement, das sich über zwei Tracks erstreckt, ebenfalls größer wird, um den zusätzlichen Platz zu verarbeiten.

Inhalte verschieben

Elemente mit einer Hintergrundfarbe füllen den Rasterbereich, in dem sie sich befinden, vollständig aus, da der Anfangswert für justify-self und align-self stretch ist.

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

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Raster

main {
  display: grid;
}

Ressourcen

Dieser Leitfaden gibt Ihnen einen Überblick über die verschiedenen Teile der Spezifikation für das Rasterlayout. Weitere Informationen finden Sie in den folgenden Ressourcen.

• Grid-Layout für MDN CSS
• Ein vollständiger Leitfaden zu Raster
• Rastercontainer erstellen
• CSS-Raster in den Chrome-Entwicklertools untersuchen
• Umfassende Sammlung von Raster-Lernmaterialien