Erfahren Sie, wie Sie zweidimensionale Websites mit CSS Grid erstellen

Mit CSS Grid können Sie zweidimensionale Website-Layouts in der Hälfte der Zeit erstellen, die Sie normalerweise benötigen.

CSS Grid ist der Nachfolger des Float-Layout-Systems, und obwohl es immer noch Fälle gibt, in denen sich die Verwendung der Float-Layout-Struktur als praktischer als die Verwendung von CSS Grid erweisen könnte, verwenden einige Entwickler CSS Grid in der Regel nur zur Strukturierung ihrer Websites.

Dies ist keine Überraschung, da CSS Grid ein leistungsstarkes Tool in Ihrem Arsenal ist. In diesem Handbuch erfahren Sie, wie Sie CSS Grid in all Ihren Webentwicklungsprojekten verwenden.

Funktionsweise des CSS-Grid-Systems

CSS Grid (oder einfach nur Grid) ist im Wesentlichen ein zweidimensionales Website-Layoutsystem, mit dem die Elemente auf einer Webseite strukturiert werden. Das CSS-Rasterlayout-System basiert auf einem Eltern-Kind-Konzept, bei dem Sie einen Hauptcontainer (das übergeordnete Element) und mehrere verschiedene Rasterelemente (die untergeordneten Elemente) in diesem Container haben.

Um CSS Grid auf einer Website verwenden zu können, müssen Sie zuerst den Grid-Container initialisieren. Dazu setzen Sie die Anzeigeeigenschaft des beabsichtigten übergeordneten Elements auf den Wert des Rasters.

Beispiel für einen CSS-Grid-Container

 
selector{
 display: grid;
 }

Der Selektor kann ein HTML-Element, eine Klasse oder eine ID sein. Wichtig ist, dass das HTML-Element, das alle anderen HTML-Elemente auf der Webseite enthält, direkt identifiziert wird.

In einer Rasterlayoutstruktur werden alle Elemente im Container als Rasterelemente bezeichnet . Standardmäßig ist das CSS-Rasterlayout vertikal (dies ist auch die Standardlayoutstruktur in HTML). Wenn also ein CSS-Raster mithilfe der Anzeigeeigenschaft über dem Layout der Rasterelemente initialisiert wird, bleibt es gleich (vertikal).

Um die Raster-Elemente auf der Webseite neu anordnen müssen Sie die Raster-template-Spalten – Eigenschaft verwendet wird , die Raster-template-Zeilen – Eigenschaft oder eine Kombination aus beidem.

Aus diesem Grund wird CSS Grid als zweidimensionales Layoutsystem identifiziert. Sie können Ihre Rasterelemente gleichzeitig horizontal (Zeilen) und vertikal (Spalten) strukturieren.

Verwenden der Eigenschaft "Grid-Template-Spalten"

Die Eigenschaft grid-template-columns sollte immer innerhalb des Containerelements neben der Anzeigeeigenschaft verwendet werden. Mit der Eigenschaft grid-template-columns können Sie die Anzahl der gewünschten Spalten in Ihrem CSS-Grid-Layout auf verschiedene Arten angeben.

Eine Möglichkeit, Ihre Rasterelemente zu strukturieren, ist die Verwendung von Pixeln (px).

Strukturieren von Rasterelementen mit Pixeln Beispiel

 
.gridContainer{
 display: grid;
 grid-template-columns: 400px 400px 400px;
 }

Im obigen Beispiel müssen Sie zwei Dinge beachten. Das erste ist, dass mit dem obigen Code drei Spalten mit einer Breite von jeweils 400 Pixel auf Ihrer Webseite erstellt werden. Wenn Sie weniger als drei Rasterelemente in Ihrem Container haben, werden nur eine oder zwei Spalten auf Ihrem Bildschirm angezeigt.

Wenn jedoch die Anzahl der Rasterelemente in Ihrem Container drei überschreitet, wird jede Gruppe von drei Rasterelementen in einer neuen Zeile platziert, bis sie fertig sind.

Das zweite, was zu beachten ist, ist, dass die Verwendung von px-Werten zur Strukturierung Ihrer Rasterelemente kein sehr praktischer Ansatz ist. Dies liegt hauptsächlich daran, dass die Pixeleinheit kein responsives Design unterstützt .

Kehren Sie zum obigen Beispiel zurück. Wenn wir sechs Rasterelemente in unserem Container hätten, wären die beiden Rasterelemente links auf einem Tablet nicht sofort sichtbar.

Eine empfohlene Alternative zur Verwendung von px (oder einem anderen festen Wert) zum Layout Ihrer Rasterelemente ist die Verwendung von Brüchen (fr Einheiten).

Beispiel für die Verwendung von Bruchwerten

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

Der obige Code generiert zwei Spalten auf der vorgesehenen Webseite. Die rechte Spalte ist doppelt so breit wie die linke. Der Hauptgrund, warum die Verwendung von fr empfohlen wird, liegt darin, dass fr die Reaktionsfähigkeit unterstützt.

Unabhängig von der Bildschirmgröße eines Geräts ist die rechte Spalte daher immer doppelt so groß wie die linke.

Dieses Layout ist in Fällen beliebt, in denen auf einer Webseite ein Seitenbereich vorhanden ist. Die Spalte mit der kleineren Größe wäre für den Seitenabschnitt reserviert, der Inhalte enthält, die sich auf den Hauptfluss beziehen, aber nicht Teil davon sind (z. B. ein Inhaltsverzeichnis).

Verwenden der Eigenschaft "Rastervorlagenvorlagen"

Die Kriterien für die Verwendung der Eigenschaft " Grid-Template-Zeilen" sind mit denen der Eigenschaft "Grid-Template-Spalten" identisch.

Ein offensichtlicher Unterschied besteht darin, dass dort, wo die Eigenschaft grid-template-rows Zeilen erstellt, die Eigenschaft grid-template-columns Spalten erstellt. Es gibt jedoch andere subtilere Unterschiede zwischen den beiden Eigenschaften (wie die impliziten Zeilen und die gesamte Zeilenstruktur).

Die Zeilenstruktur

Zurück zum obigen Beispiel für die Verwendung von Bruchwerten: Wenn dieser Code für mehr als zwei Elemente verwendet wird, werden die zusätzlichen Elemente umbrochen, um zusätzliche Zeilen mit zwei Spalten zu erstellen, bis alle Elemente im Raster vorhanden sind.

Dies ist bei der Eigenschaft grid-template-rows nicht der Fall. Betrachten Sie das folgende Beispiel.

Beispiel für Rastervorlagenzeilen

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 }

Wenn der obige CSS-Code auf ein HTML-Dokument abzielt, das fünf <div> -Tags enthält , die jeweils direkte untergeordnete Elemente des Klassenelements gridContainer sind, behält das erste Element seine Standardhöhe bei, und das zweite Element hat eine Höhe dreimal so groß wie die erste.

Das Problem wird offensichtlich, wenn Sie das dritte div-Element erreichen. Sie werden feststellen, dass die Zeilen nicht unterbrochen und eine zweite Spalte erstellt werden, sondern ununterbrochen auf dem Bildschirm fortgesetzt werden. Diese Zeilen werden als implizite Zeilen bezeichnet, da sie vom obigen Code nicht betroffen sind und weiterhin ihre Standardhöhe beibehalten.

Diese impliziten Zeilen können mithilfe der Eigenschaft grid-auto-rows gezielt werden.

Verwenden der Eigenschaft "Raster-Auto-Zeilen"

Die Eigenschaft grid-auto-rows wird häufig verwendet, um Zeilen in einem Raster eine Höhe zuzuweisen, die außerhalb des Bereichs der Eigenschaft grid-template-rows liegt .

Beispiel für Raster-Auto-Zeilen

 
.gridContainer{
 display: grid;
 grid-template-rows: 1fr 3fr;
 grid-auto-rows: 3fr;
 }

Wenn der CSS – Code oben wird verwendet , um einen Behälter zum Ziel , dass direkt fünf umschließt Gitter-Elemente der Raster-template-Eigenschaft rows oben auf die ersten beiden Gitterelemente anwenden wird, während die Raster-Auto-Reihe Eigenschaft auf die anderen drei gilt Elemente – Effektives Lösen des Problems der impliziten Zeilen.

Obwohl Sie die Rastervorlagenzeilen- und Rastervorlagenspalten bei Bedarf separat verwenden können, wird empfohlen, das CSS-Raster zu verwenden, wenn zweidimensionale Layouts (Zeilen und Spalten) erforderlich sind. Wenn nur ein eindimensionales Layout (Zeilen oder Spalten) benötigt wird, ist eine Float-Layout-Struktur eine viel bessere Option.

Die Strukturierung des Layouts Ihrer Website war noch nie so einfach

Mit CSS Grid können Sie eine zweidimensionale Website erstellen, die auf einem Eltern-Kind-Konzept basiert. Die Dinge, an die Sie denken müssen, um dies zu ermöglichen, sind:

• Zuweisen des Rasterwerts zur Anzeigeeigenschaft im Containerelement.
• Verwenden der Rastervorlagenzeilen und Rastervorlagenspalten innerhalb des Containerelements.
• Verwenden der Eigenschaft grid-auto-row, wenn die Anzahl der Elemente im Containerelement die Ziele der Eigenschaft grid-template-rows überschreitet.

Der letzte Schritt besteht darin, sicherzustellen, dass Sie das CSS-Raster effektiv für zweidimensionale Layoutstrukturen verwenden. Wenn eine eindimensionale Layoutstruktur erforderlich ist, kann sich die Float-Layoutstruktur als bessere Option erweisen.