Lernen Sie CSS Grid in 5 Minuten - Ein Tutorial für Anfänger

Rasterlayouts sind für das Design von Websites von grundlegender Bedeutung, und das CSS-Rastermodul ist das leistungsstärkste und einfachste Werkzeug zum Erstellen. Ich persönlich denke, es ist viel besser als zum Beispiel Bootstrap (lesen Sie hier, warum).

Das Modul wurde auch von den wichtigsten Browsern (Safari, Chrome, Firefox, Edge) nativ unterstützt, sodass ich glaube, dass alle Front-End-Entwickler diese Technologie in nicht allzu ferner Zukunft erlernen müssen .

In diesem Artikel werde ich Sie so schnell wie möglich durch die Grundlagen von CSS Grid führen. Ich werde alles weglassen, was Sie nicht interessieren sollten, bis Sie die Grundlagen verstanden haben.

Ich habe auch einen kostenlosen CSS-Grid-Kurs erstellt. Klicken Sie hier, um vollen Zugriff auf zu erhalten

es.

Lesen Sie alternativ diesen Artikel, in dem erklärt wird, was Sie im Verlauf des Kurses lernen werden:

Jetzt lass uns hineinspringen!

Ihr erstes Rasterlayout

Die beiden Hauptbestandteile eines CSS-Grids sind der Wrapper (übergeordnet) und der

Gegenstände (Kinder). Der Wrapper ist das eigentliche Raster und die Elemente sind der Inhalt innerhalb des Rasters.

Hier ist das Markup für einen Wrapper mit sechs Elementen:

 1 2 3 4 5 6 

Um unseren Wrapper divin ein Raster zu verwandeln , geben wir ihm einfach eine Anzeige von

grid::

Dies macht jedoch noch nichts, da wir nicht definiert haben, wie unser Raster aussehen soll. Es werden einfach 6 div'sübereinander gestapelt.

Ich habe ein bisschen Styling hinzugefügt, aber das hat nichts mit CSS-Grid zu tun.

Spalten und Zeilen

Um es zweidimensional zu machen, müssen wir die Spalten und Zeilen definieren. Erstellen wir drei Spalten und zwei Zeilen. Wir werden die grid-template-rowund grid-template-columnEigenschaften verwenden.

Da wir drei Werte für geschrieben haben grid-template-columns, erhalten wir drei Spalten. Wir erhalten zwei Zeilen, da wir zwei Werte für die angegeben haben grid-template-rows.

Die Werte bestimmen, wie breit unsere Spalten sein sollen (100 Pixel) und wie hoch unsere Zeilen sein sollen (50 Pixel). Hier ist das Ergebnis:

Schauen Sie sich auch dieses Beispiel an, um sicherzustellen, dass Sie die Beziehung zwischen den Werten und dem Aussehen des Rasters richtig verstehen.

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

Versuchen Sie, die Verbindung zwischen dem Code und dem Layout zu erfassen.

So läuft es ab:

Elemente platzieren

Als nächstes müssen Sie lernen, wie Sie Elemente im Raster platzieren. Hier erhalten Sie Superkräfte, da das Erstellen von Layouts kinderleicht ist.

Erstellen wir ein 3x3-Raster mit demselben Markup wie zuvor.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

Dies führt zu folgendem Layout:

Beachten Sie, dass auf der Seite nur ein 3x2-Raster angezeigt wird, während wir es als 3x3-Raster definiert haben. Das liegt daran, dass wir nur sechs Elemente haben, mit denen wir das Raster füllen können. Wenn wir noch drei hätten, wäre auch die unterste Reihe gefüllt.

Um die Elemente zu positionieren und ihre Größe zu ändern, werden wir sie als Ziel festlegen und die Eigenschaften grid-columnund grid-rowverwenden:

.item1 { grid-column-start: 1; grid-column-end: 4; } 

Wir sagen hier, dass item1 in der ersten Gitterlinie beginnen und in der vierten Spaltenlinie enden soll. Mit anderen Worten, es wird die gesamte Reihe einnehmen.

So wird das auf dem Bildschirm abgespielt:

Sind Sie verwirrt, warum wir 4 Spaltenzeilen haben, wenn wir nur 3 Spalten haben? Schauen Sie sich dieses Bild an, auf dem ich die Spaltenlinien in Schwarz gezeichnet habe:

Beachten Sie, dass wir jetzt alle Zeilen im Raster verwenden. Als wir dafür sorgten, dass der erste Gegenstand die gesamte erste Reihe einnahm, drückte er den Rest der Gegenstände nach unten.

Abschließend möchte ich eine einfachere Methode zum Schreiben der obigen Syntax zeigen:

Um sicherzustellen, dass Sie dieses Konzept richtig verstanden haben, ordnen wir die Elemente ein wenig neu an.

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

So sieht das auf der Seite aus. Versuchen Sie, Ihren Kopf darum zu wickeln, warum es so aussieht. Es sollte nicht zu schwer sein.

Und das war es!

Danke fürs Lesen! Mein Name ist Per Borgen, ich bin Mitbegründer von Scrimba - der einfachste Weg, das Codieren zu lernen. Sie sollten sich unser Responsive Web Design Bootcamp ansehen, wenn Sie lernen möchten, moderne Websites auf professioneller Ebene zu erstellen.