Grundlegendes zu CSS Grid: Erstellen eines Grid-Containers

Dies ist der Beginn einer neuen Serie hier im Smashing Magazine, die sich auf CSS Grid Layout konzentriert. Während Grid seit 2017 in Browsern verfügbar ist, hatten viele Entwickler noch keine Gelegenheit, es in einem Projekt zu verwenden. Es scheint viele neue Eigenschaften und Werte im Zusammenhang mit CSS Grid Layout zu geben. Dies kann es überwältigend erscheinen lassen. Viele der Spezifikationsdetails bieten jedoch alternative Möglichkeiten, Dinge zu tun, was bedeutet, dass Sie nicht die gesamte Spezifikation lernen müssen, um loszulegen. Diese Serie zielt darauf ab, Sie vom Grid-Neuling zum Experten zu machen – mit vielen praktischen Anwendungstipps auf dem Weg.

Dieser erste Artikel behandelt, was passiert, wenn Sie einen Grid-Container erstellen, und die verschiedenen Eigenschaften, die Sie für das übergeordnete Element verwenden können, um dieses Grid zu steuern. Sie werden feststellen, dass es mehrere Anwendungsfälle gibt, die nur mit den Eigenschaften erfüllt werden, die Sie auf den Grid-Container anwenden.

In diesem Artikel behandeln wir:

• Erstellen eines Grid-Containers mit display: grid oder display: inline-grid ,
• Spalten und Zeilen mit grid-template-columns und grid-template-rows ,

• Steuern der Größe impliziter Spuren mit grid-auto-columns und grid-auto-rows .

• Teil 1: Erstellen eines Grid-Containers

• Teil 2: Gitterlinien

• Teil 3: Rastervorlagenbereiche

Erstellen eines Grid-Containers

Grid ist wie Flexbox ein Wert der CSS- display . Um dem Browser mitzuteilen, dass Sie das Grid-Layout verwenden möchten, verwenden Sie daher display: grid . Nachdem Sie dies getan haben, zeigt Ihnen der Browser ein Feld auf Blockebene auf dem Element mit display: grid und alle direkten untergeordneten Elemente beginnen, an einem Grid-Formatierungskontext teilzunehmen. Das bedeutet, dass sie sich wie Rasterelemente verhalten und nicht wie normale Block- und Inline-Elemente.

Möglicherweise sehen Sie jedoch nicht sofort einen Unterschied auf Ihrer Seite. Da Sie keine Zeilen oder Spalten erstellt haben, haben Sie ein einspaltiges Raster. Es werden genügend Zeilen generiert, um alle Ihre direkten untergeordneten Elemente aufzunehmen, und sie werden nacheinander in dieser einzelnen Spalte angezeigt. Optisch sehen sie genauso aus wie Blockelemente.

Sie werden einen Unterschied feststellen, wenn Sie eine Textzeichenfolge hatten, die nicht in ein Element eingeschlossen und ein direktes untergeordnetes Element des Rastercontainers war, da die Zeichenfolge in ein anonymes Element eingeschlossen und zu einem Rasterelement wird. Jedes Element, das normalerweise ein Inline-Element ist, wie z. B. ein Span, wird ebenfalls zu einem Grid-Element, sobald sein übergeordnetes Element ein Grid-Container ist.

Das folgende Beispiel enthält zwei Elemente auf Blockebene sowie eine Textzeichenfolge mit einer Spanne in der Mitte der Zeichenfolge. Am Ende haben wir fünf Rasterelemente:

• Die beiden div Elemente,
• Die Textzeichenfolge vor der Spanne,
• Die Spanne,
• Die Textzeichenfolge nach der Spanne.

Wenn Sie das Raster mit dem Firefox Grid Inspector untersuchen, können Sie die fünfzeiligen Spuren sehen, die für die Elemente erstellt wurden.

Sie können auch ein Inline-Raster erstellen, indem Sie display: inline-grid verwenden; In diesem Fall wird Ihr Grid-Container zu einer Inline-Level-Box. Die direkten untergeordneten Elemente sind jedoch immer noch Rasterelemente und verhalten sich genauso wie Rasterelemente innerhalb einer Box auf Blockebene (es handelt sich nur um den äußeren Anzeigetyp). Aus diesem Grund verhält sich der Grid-Container wie oben, wenn er sich neben anderen Boxen auf der Seite befindet.

Dieses nächste Beispiel hat ein Raster, gefolgt von einer Textzeichenfolge, da dies ein Inline-Level-Raster ist, kann der Text daneben angezeigt werden. Dinge auf Inline-Ebene dehnen sich nicht so aus, dass sie den gesamten Platz in der Inline-Dimension einnehmen, wie es Dinge auf Blockebene tun.

Hinweis : In Zukunft werden wir in der Lage sein, unser Layout besser zu beschreiben, indem wir display: block grid verwenden, um unseren Container auf Blockebene zu erstellen, und display: inline grid , um einen Container auf Inline-Ebene zu erstellen. Sie können über diese Änderung der Anzeigespezifikation in meinem Artikel „Digging Into The DIsplay Property: The Two Values ​​Of Display“ nachlesen.

Spalten und Zeilen

Um etwas zu erhalten, das wie ein Raster aussieht, müssen wir Spalten und Zeilen hinzufügen. Diese werden mit den Eigenschaften grid-template-columns und grid-template-rows erstellt. Diese Eigenschaften sind in der Spezifikation so definiert, dass sie einen Wert akzeptieren, der als track-list bezeichnet wird.

Diese Eigenschaften geben als durch Leerzeichen getrennte Spurliste die Liniennamen und Spurgrößenfunktionen des Rasters an. Die Eigenschaft grid-template-columns gibt die Spurliste für die Spalten des Rasters an, während grid-template-rows die Spurliste für die Zeilen des Rasters angibt.

Einige gültige Titellistenwerte lauten wie folgt:

Wie Sie sehen, gibt es viele Möglichkeiten, eine Titelliste zu erstellen! Schauen wir uns genau an, wie diese alle funktionieren, mit ein paar Tipps, warum Sie sie verwenden könnten.

Verwenden von Längeneinheiten

Sie können beliebige Längeneinheiten oder einen Prozentsatz verwenden, um Ihre Tracks zu erstellen. Wenn die Größe der Tracks weniger beträgt, als im Grid-Container verfügbar ist, werden die Tracks standardmäßig am Anfang des Containers ausgerichtet und der freie Platz geht bis zum Ende. Dies liegt daran, dass der Standardwert von align-content und justify-content start ist. Sie können die Rasterspuren verteilen oder mithilfe der Ausrichtungseigenschaften an das Ende des Containers verschieben, was ich ausführlich in meinem Artikel „How To Align Things In CSS“ erkläre.

Sie können auch die Schlüsselwörter min-content , max-content und fit-content() . Durch die Verwendung von min-content erhalten Sie eine Spur, die so klein wie möglich ist, ohne einen Überlauf zu verursachen. Daher wird der Inhalt bei Verwendung als Spaltengröße nach Möglichkeit weich umbrochen. Die Spur wird zur Größe des längsten Wortes in der Spalte oder des größten Elements mit fester Größe.

Die Verwendung von max-content führt dazu, dass der Inhalt überhaupt kein Soft-Wrapping durchführt. In einer Spalte wird jede Textzeichenfolge ausgepackt, was zu einem Überlauf führen kann.

Das Schlüsselwort fit-content kann nur verwendet werden, indem ein Wert übergeben wird. Dieser Wert wird zum Maximum, auf das diese Spur anwächst. Daher verhält sich der Track wie max-content wobei der Inhalt ausgepackt und gestreckt wird, bis er den von Ihnen eingegebenen Wert erreicht. An diesem Punkt beginnt er wie gewohnt mit dem Umbrechen. Ihr Track kann also kleiner als der übergebene Wert sein, aber niemals größer.

Mehr über die Größenanpassung in Grid und andere Layoutmethoden erfahren Sie in meinem Artikel „Wie groß ist diese Box? Größe im CSS-Layout verstehen“.

Wenn Sie am Ende Tracks haben, die mehr Platz einnehmen, als Sie in Ihrem Container haben, werden sie überlaufen. Wenn Sie Prozentsätze verwenden, müssen Sie wie bei prozentbasierten Float- oder Flex-Layouts darauf achten, dass der Gesamtprozentsatz nicht mehr als 100 % beträgt, wenn Sie einen Überlauf vermeiden möchten.

Die fr -Einheit

Grid Layout enthält eine Methode, mit der Sie Prozentsätze selbst berechnen können – Spurgröße mit der Einheit fr . Diese Einheit ist keine Länge und kann daher nicht mit calc() kombiniert werden; es ist eine Flex-Einheit und stellt den verfügbaren Platz im Gittercontainer dar.

Das bedeutet, dass bei einer Trackliste von 1fr 1fr 1fr ; Der verfügbare Platz wird dreigeteilt und gleichmäßig auf die Gleise aufgeteilt. Bei einer Track-Liste von 2fr 1fr 1fr wird der verfügbare Platz in vier Teile geteilt und Track eins wird in zwei Teile aufgeteilt – je ein Teil auf Track zwei und drei.

Achten Sie darauf, dass standardmäßig verfügbarer Speicherplatz freigegeben wird, der nicht der gesamte Speicherplatz im Container ist. Wenn einer Ihrer Tracks ein Element mit fester Größe oder ein langes Wort enthält, das nicht umbrochen werden kann, wird dies angeordnet, bevor der Platz geteilt wird.

Im nächsten Beispiel habe ich die Leerzeichen zwischen den Wörtern von ItemThree . Dadurch entstand eine lange unzerbrechliche Zeichenfolge, sodass die Platzverteilung erfolgt, nachdem das Layout dieses Elements berücksichtigt wurde.

Sie können die fr -Einheit mit Spuren fester Länge mischen, und hier wird sie sehr nützlich. Sie könnten beispielsweise eine Komponente mit zwei Säulen mit fester Größe und einem mittleren Bereich haben, der sich dehnt:

Sie können eine Komponente haben, bei der eine Spur auf fit-content(300px) und die andere auf 1fr eingestellt ist. Dies führt zu einer Komponente, die in der ersten Spur etwas kleiner als 300 Pixel haben kann. In diesem Fall nimmt sie nur den benötigten Platz ein und die fr -Einheit wird erweitert, um den Rest des Platzes einzunehmen.

Wenn Sie etwas Größeres hinzufügen (z. B. ein Bild mit max-width: 100% ), hört die erste Spur auf, bei 300 Pixel zu wachsen, und die Einheit fr nimmt den Rest des Platzes ein. Das Mischen der fr -Einheit mit fit-content ist eine Möglichkeit, einige sehr flexible Komponenten für Ihre Website zu erstellen.

Die Funktion repeat()

Die Verwendung von repeat() in Ihrer Trackliste kann das wiederholte Eintippen des gleichen Werts oder der gleichen Werte ersparen. Zum Beispiel sind die folgenden zwei Zeilen gleich:

 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(12, 1fr);

Bei Verwendung von repeat() ist der Wert vor dem Komma die Anzahl der Wiederholungen der Titelliste, die nach dem Komma kommt. Diese Titelliste kann aus mehreren Werten bestehen. Das bedeutet, dass Sie ein Muster von Spuren wiederholen können.

Sie können die Funktion repeat() für einen Teil einer Trackliste verwenden. Die folgende Zeile würde Ihnen beispielsweise einen 1fr-Track, 3 200px-Tracks und einen letzten 1fr-Track geben.

 grid-template-columns: 1fr repeat(3,200px) 1fr

Neben einer Zahl vor dem Komma, die eine feste Anzahl von Wiederholungen des Musters angibt, können Sie auch die Schlüsselwörter auto-fill oder auto-fit verwenden. Die Verwendung eines dieser Schlüsselwörter bedeutet, dass Ihr Grid-Container anstelle einer festen Anzahl von Spuren mit so vielen Spuren gefüllt wird, wie es passt.

Die Verwendung einer Einheit mit fester Länge bedeutet, dass Sie am Ende etwas freien Platz übrig haben, es sei denn, der Behälter kann genau durch diese Größe geteilt werden. Im obigen Beispiel ist mein Container 500 Pixel breit, also bekomme ich zwei 200-Pixel-Spuren plus Leerzeichen am Ende.

Wir können eine andere Gitterfunktion verwenden, um den Wert auf ein Minimum zu reduzieren, wobei jeder freie Platz über alle Spuren verteilt wird. Die Funktion minmax() nimmt eine minimale und eine maximale Größe an. Mit einem Minimum von 200px und einem Maximum von 1fr erhalten wir so viele 200px-Spuren, wie passen, und da das Maximum 1fr beträgt, von dem wir bereits wissen, dass es den Platz gleichmäßig aufteilt, wird das Extra auf die Spuren verteilt.

Ich habe erwähnt, dass es zwei mögliche Schlüsselwörter gibt: auto-fill und auto-fit . Wenn Sie genug Inhalt haben, um die erste Zellenreihe zu füllen, verhalten sich diese genau so. Wenn Sie dies jedoch nicht tun (z. B. wenn wir alle bis auf einen Gegenstand aus dem obigen Container entfernen), verhalten sie sich anders.

Durch die Verwendung von auto-fill wird die verfügbare Spurgröße beibehalten, auch wenn kein Inhalt vorhanden ist.

Wenn Sie stattdessen auto-fit verwenden, werden die leeren Spuren reduziert:

Wenn Sie den Firefox Grid Inspector verwenden, können Sie sehen, dass die Spuren immer noch da sind, aber auf Null reduziert wurden. Die Endlinie unseres Rasters ist immer noch Linie 3, da wir zwei Gleise einbauen können.

Benannte Linien

Mein letztes Beispiel oben verwendete den Named-Lines-Ansatz. Bei Verwendung von Grid. Sie haben immer Zeilennummern, können die Zeilen aber auch benennen. Zeilen werden in eckigen Klammern benannt. Sie können mehrere Namen für eine Zeile haben; in diesem Fall trennt sie ein Leerzeichen. In der folgenden Trackliste haben beispielsweise alle meine Linien zwei Namen.

 grid-template-columns: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

Sie können Ihre Zeilen nach Belieben benennen, mit Ausnahme des Wortes span , da dies ein reserviertes Wort ist, da es beim Platzieren von Elementen auf dem Gitter verwendet wird.

Hinweis : Im nächsten Artikel dieser Serie werde ich mehr über die zeilenbasierte Platzierung und die Verwendung benannter Zeilen sprechen. Lesen Sie in der Zwischenzeit meinen Artikel „Dinge im CSS-Grid-Layout benennen“, um mehr über das Thema zu erfahren.

Das explizite vs. das implizite Raster

Beim Erstellen eines Rasters mit grid-template-columns und grid-template-rows mit einer Spurliste erstellen Sie das, was als explizites Raster bezeichnet wird. Dies ist das von Ihnen definierte Raster, das die Größe hat, die Sie für jede Spur gewählt haben.

Wenn Sie mehr Elemente haben, als passen, oder ein Element so platzieren, dass es außerhalb der Grenzen des von Ihnen erstellten Rasters liegt, erstellt Grid Spuren im impliziten Raster . Diese impliziten Spuren werden standardmäßig automatisch angepasst. Wir haben dieses implizite Raster in Aktion gesehen, als ich display: grid auf dem übergeordneten Element deklarierte und durch grid erstellte Zeilen, eine für jedes Element. Ich habe diese Zeilen nicht definiert, aber da es Rasterelemente gab, wurden die Zeilenspuren erstellt, um ihnen einen Ort zu geben, an den sie gehen können.

Sie können eine Größe für implizite Zeilen oder Spalten festlegen, indem Sie die Eigenschaften grid-auto-rows oder grid-auto-columns verwenden. Diese Eigenschaften übernehmen eine Trackliste. Wenn Sie also möchten, dass alle impliziten Spalten mindestens 200 Pixel hoch sind, aber größer werden, wenn mehr Inhalt vorhanden ist, können Sie Folgendes verwenden:

 grid-auto-rows: minmax(200px, auto)

Wenn Sie möchten, dass die erste implizite Zeile automatisch angepasst wird und die zweite die min-content hat usw. (bis alle Rasterelemente untergebracht sind), können Sie mehrere Werte übergeben:

grid-auto-rows: auto 100px

Verwenden eines Rasters mit automatischer Platzierung

Das Erstellen eines Rasters (und das automatische Platzieren von Elementen durch den Browser) bringt Sie in Bezug auf die nützlichen Muster, die Sie erzielen können, weit. Wir haben uns noch nicht mit dem Platzieren von Elementen im Raster befasst, aber viele Layouts, die Grid verwenden, führen keine Platzierung durch. Sie verlassen sich einfach darauf, die Elemente in der Reihenfolge der Quelle zu platzieren – eines in jeder Rasterzelle.

Wenn CSS Grid neu für Sie ist, können Sie mit verschiedenen Spurgrößen spielen und sehen, wie sich die Elemente selbst in die von Ihnen erstellten Zellen einfügen.

• Teil 1: Erstellen eines Grid-Containers
• Teil 2: Gitterlinien
• Teil 3: Rastervorlagenbereiche