So erstellen Sie ein einfaches Layout mit CSS-Grid-Layouts

Wenn Sie sich jemals mit Druckdesign beschäftigt haben, wissen Sie, woher die Idee der Rasterlayouts stammt. Ein Raster ist ein präzises Messwerkzeug, mit dem Designelemente auf einer Seite positioniert werden. Diese Idee wird im Web häufig verwendet, um Inhalte zu organisieren und zu vereinheitlichen, was zu einem verbesserten Seherlebnis für Ihre Benutzer führt.

Als die Praxis des Webdesigns neu war, waren Layouts ziemlich einfach. Kopfzeile, Seitenleiste, Inhaltsbereich und Fußzeile. Jetzt, da sich das Web weiterentwickelt hat, sind unsere Layouts komplexer geworden und wir müssen uns als Webdesigner mit viel mehr auseinandersetzen. Wir benötigen unter anderem häufig zahlreiche Inhaltsbereiche, responsives Design, Vorlagendesigns für mehrere Seitenlayouts. Und um das Design zu implementieren und richtig anzuzeigen, sind Floats und Positionierung erforderlich. Floats klingen einfach, aber es kann manchmal schwierig sein, damit zu arbeiten.

Glücklicherweise bietet das Raster eine einfachere Möglichkeit, Webinhalte zu entwerfen und anzuzeigen. Es ist eine großartige Zeit, ein Designer zu sein, da CSS-Grid-Layouts schnell an Bedeutung gewinnen. Es mag den Anschein haben, als wären Grids in den letzten Jahren eine neue Idee im Webdesign gewesen, aber ob Sie es glauben oder nicht, CSS Grid Layouts sind seit vielen Jahren in Arbeit. Die Browserunterstützung für sie erfolgte sehr schnell, sodass sie jetzt dazu beitragen können, einige der Frustrationen bei der Positionierung zu lindern, mit denen sich Designer seit vielen Jahren auseinandersetzen müssen.

Es ist endlich an der Zeit, in das Raster einzudringen und die neuen Gestaltungsmöglichkeiten zu erkunden!

CSS-Grid-Unterstützung

Es hängt alles von den Browsern ab, die Sie unterstützen müssen, aber es besteht eine ziemlich gute Chance, dass Sie sich bei der Verwendung von CSS-Grids keine Gedanken über den „Flag-Modus“ machen müssen. Sie können jederzeit die Can I Use-Dokumentation besuchen, um dies noch einmal zu überprüfen, aber die Unterstützung für CSS-Grids hat dramatisch zugenommen, und viele Designer können es in der Produktion verwenden, was ein Grund zum Feiern ist!

CSS-Grid-Layout-Grundlagen

Durch die Verwendung von CSS helfen Grid-Layouts dabei, Inhaltsbereiche auf Ihrer Webseite zu definieren. In den CSS Grid Layout Specifications ist ein relativ neuer Satz von Eigenschaften definiert. Dies ist eine großartige Ressource, wenn Sie mehr über diese neue Art des Layout-Designs erfahren möchten. CSS-Grid-Layouts helfen, die Dinge zu vereinfachen und das Erstellen von Layouts zu erleichtern. Stellen Sie sich das Raster als eine Struktur vor, in der Messungen definiert werden können.

Teile des Rasters

Linien

In diesem Fall gibt es fünf vertikale Linien und drei horizontale Linien. Zeilen erhalten Nummern beginnend bei eins. In diesem Beispiel werden vertikale Linien von links nach rechts angezeigt, dies hängt jedoch von der Schreibrichtung ab. Da dies das Lesen von links nach rechts zeigt, werden die Dinge umgekehrt, wenn es von rechts nach links ist. Zeilen können Namen gegeben werden (optional), was bei der Referenzierung in CSS hilft.

Spuren

Eine Spur ist der Raum zwischen zwei parallelen Linien. Im Diagramm gibt es vier vertikale Spuren und zwei horizontale Spuren. Es gibt eine große doppelte Anstrengung zwischen Linien und Spuren. Linien sind eine großartige Möglichkeit, um zu verweisen, wo der Inhalt beginnt und endet. Tracks sind dort, wo der Inhalt tatsächlich hingeht.

Zellen

Zellen werden dort gefunden, wo sich eine horizontale und eine vertikale Spur treffen. Das Diagramm enthält acht Zellen.

Bereiche

Zellen kommen bei der Angabe von Bereichen ins Spiel. Ein Bereich ist eine rechteckige Form, die sich über mehrere Zellen erstrecken kann. Bereiche können wie Linien optional benannt werden. Das Diagramm enthält einige Beschriftungen: „A“, „B“ und „C“.

Erstellen eines Rasterlayouts

Es kann hilfreich sein, Dinge zu skizzieren, bevor Sie mit dem Layout beginnen. Es gibt keinen Ersatz für das gute alte Millimeterpapier.

HTML für das Raster

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

Der Behälter ist sehr wichtig. Innerhalb des Containers befinden sich die verschiedenen Inhaltsblöcke für die Website. Die Reihenfolge der Rasterelemente innerhalb des Containers spielt keine Rolle. Als Nächstes verwenden wir CSS, um sie in unserem Layout zu platzieren.

CSS-Stile

Nachdem Sie mit dem HTML-Markup fertig sind, erfolgt die wichtigste Deklaration im CSS. Innerhalb des Containers müssen Sie display:grid oder display:inline-grid anwenden. Verwenden Sie display:grid wenn Sie ein Raster auf Blockebene möchten. Verwenden Sie display:inline-grid für Raster auf Inline-Ebene.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

Die Eigenschaften grid-template-columns und grid-template-rows werden verwendet, um die Breite der Zeilen und Spalten anzugeben. Die grid-template-columns wurden auf 1fr und 3fr gesetzt. Hier nimmt das Raster mit den gebrochenen Einheiten Gestalt an. Bei diesen Werten ist es offensichtlich, dass es zwei Spalten gibt und sie nicht gleich breit sind. Die auf 3fr eingestellte Säule ist dreimal breiter als die andere. Dies erklärt, warum die Seitenleiste schmaler erscheint als der Inhaltsbereich.

Es gibt reaktionsschnelle Anpassungen, die vorgenommen werden können, aber die Verwendung der Brucheinheiten ist ein guter erster Schritt. Der Abstand zwischen den Bereichen kann mit grid-column-gamp und grid-row-gap gesteuert werden.

Die Dinge sehen ziemlich eng aus, aber mit ein paar weiteren Spezifikationen werden die Dinge Gestalt annehmen.

Dieses Beispiel beginnt mit der Platzierung der Kopfzeile, aber die Elemente können in jeder beliebigen Reihenfolge platziert werden, die für Sie am besten geeignet ist. Wenn Sie mit der Fußzeile beginnen möchten, funktioniert das auch.

Beginnen wir mit der Überschrift, die von Spalte Zeile 1 bis Spalte Zeile 4 und von Zeile Zeile 1 bis Zeile 2 reicht. Das CSS sieht folgendermaßen aus:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Sie werden vielleicht bemerken, dass die Seitenleiste gestaucht ist und wir sie nicht sehr viel sehen können. Wir müssen ein wenig umstrukturieren. In diesem Layout hilft es bei der Anordnung, auf die Linien zu verweisen, um die Platzierung zu erhalten. Die Linien dienen als Richtlinien. Die Kopfzeile befindet sich zwischen der Zeile in Zeile eins und der Zeile in Zeile zwei. Die Seitenleiste beginnt bei Zeile drei und endet bei Zeile sechs. Die Kopfzeile endete bei zwei, also wird diese direkt darunter platziert. Um das Beispiel anzuzeigen, sehen Sie sich das Projekt auf Codepen an.

Wir verwenden grid-column-start um die vertikale Startlinie für ein Element anzugeben. In diesem Fall würde es auf drei eingestellt werden. Das grid-column-end gibt die vertikale Endlinie für ein Element an. In diesem Fall wäre diese Eigenschaft gleich vier. Andere Zeilenwerte werden ebenfalls auf die gleiche Weise festgelegt. Die Platzierung der Seitenleiste ist vorhanden, sie wird nur vom Inhaltsbereich verdeckt.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

Der Hauptinhalt beginnt bei Spalte drei und endet bei Spalte vier. Der obere Rand der Seitenleiste und des Inhaltsbereichs sind gleich, sodass beide einen grid-row-start von drei haben. Sie fragen sich vielleicht, wie der Inhalt und die Seitenleiste viel größer sind. Indem Sie dem Container eine Höhe zuweisen, in diesem Fall 400 Pixel, ist dieser jetzt höher als die anderen Elemente.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

Die letzten beiden Inhaltsbereiche sind der zusätzliche Inhaltsbereich und die Fußzeile.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

End- und Startdeklarationen können effizienter geschrieben werden. Möglicherweise sehen Sie grid-column-start: 1; und grid-column-end: 3; in Kurzschrift geschrieben. Dies würde wie folgt aussehen grid-column: 1 / 3; . Dieselbe Idee kann verwendet werden, um Spaltenzeileninformationen zu deklarieren.

Responsive Vorteile

Jetzt, wo ein Layout erstellt wurde, sieht es sehr „Desktop“ aus. Was ist mit Tablets und Mobilgeräten? CSS-Grid-Layouts funktionieren gut mit Medienabfragen, sodass sich das Design an unterschiedliche Bildschirmgrößen anpassen kann. Was wirklich cool ist, ist, dass Sie die Inhaltsbereiche an diesen verschiedenen Haltepunkten für Medienabfragen ändern können. Als Designer bedeutet dies, dass Sie an verschiedenen Haltepunkten auswählen, was für Ihr Layout am besten geeignet ist. Wenn Sie beispielsweise möchten, dass der „zusätzliche Inhalt“ über dem Bereich „Inhalt“ platziert wird, können Sie die richtigen Spalten und Zeilen angeben.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

Dadurch, dass die Spalten bei eins beginnen und bei vier enden, haben wir die Inhaltsbereiche auf volle Breite gebracht. Die Rasterzeilen werden so platziert, dass der „zusätzliche Inhalt“ jetzt über dem „Inhalt“ liegt.

Browser-Tool für CSS-Grid-Layout

Während Sie Layouts entwerfen oder andere Websites untersuchen, bietet Firefox ein großartiges Tool für die Arbeit mit CSS-Grid-Layouts. Es heißt CSS Grid Playground und macht die Untersuchung des Grids sehr intuitiv. Wenn Sie zum Inspektor gehen, gibt es auf der Registerkarte Layout eine Option, um visuell zu sehen, wie das Raster aufgebaut ist. Es wird den Designprozess einfacher machen, dieses Tool zu haben, um zu untersuchen, wie sich verschiedene Gittereigenschaften auf das gesamte Gitterlayout und -design auswirken.

CSS-Grid-Layouts sind eine neue, aufregende Möglichkeit, Weblayouts zu erstellen. Wie Sie sehen können, ist es ziemlich einfach, ein einfaches Seitenlayout zu erstellen. Dieses einfache Beispiel ist eine gute Grundlage für komplexere Layouts. Da dies immer beliebter wird, bietet diese Technologie einen Vorteil beim Entwerfen für verschiedene Geräte und Haltepunkte mit den Layoutanpassungen, die vorgenommen werden können.