CSS Grid ist ein zweidimensionales, gitterbasiertes Layoutsystem, mit dem Sie organisierte und flexible Website-Layouts erstellen können. Betrachten Sie es als ein Raster von Spalten und Reihen mit dem Sie Webseitenelemente positionieren und anordnen können. Im Gegensatz zu HTML-Tabellen werden CSS-Grid-Layouts jedoch mit CSS und nicht mit HTML-Markup gesteuert. Dies macht CSS Grid äußerst flexibel für responsives Webdesign.
Wie CSS Grid funktioniert Blocs
Beim Arbeiten mit CSS Grid innerhalb Blocsist es wichtig zu berücksichtigen, dass das Grid-Layout aus zwei Hauptelementen besteht, einem übergeordneten Grid-Container und in den meisten Fällen mehreren inneren untergeordneten Containern.
Übergeordneter Grid-Container
Der übergeordnete Rastercontainer ist für die Hauptlayoutinformationen verantwortlich. Für dieses Element gelten beispielsweise die Anzahl der Spalten/Zeilen und deren jeweilige Lückenmaße.
Grid-Untercontainer
Die inneren untergeordneten Container sind die Felder, in denen Sie normalerweise die Elemente Ihrer Website-Oberfläche platzieren würden. Standardmäßig sind diese Container auf eingestellt Auto-Flow (passen in das Raster), können jedoch mithilfe benutzerdefinierter Klassen angepasst werden, um auf vielfältige Weise innerhalb des übergeordneten Rastercontainers positioniert zu werden.
Weitere Informationen zum Positionieren von untergeordneten Containern finden Sie hier hier.
Fügen Sie einen Grid-Container hinzu
Sie können mit der Verwendung von CSS Grid in Ihrem beginnen Blocs Projekt durch Hinzufügen eines CSS-Grid-Containers mithilfe des dedizierten Bric.
Oder alternativ durch Auswahl von a Div Bric und Einstellung seiner tippe zum Grid-Container.
Das Standard-CSS-Rasterlayout in Blocs ist zwei Spalten mal zwei Zeilen. Wenn das Layout in irgendeiner Weise angepasst wird, beispielsweise durch Hinzufügen zusätzlicher Spalten oder Zeilen, werden diese angepassten Layoutinformationen in einer benutzerdefinierten Klasse gespeichert, die automatisch auf den CSS-Grid-Container angewendet wird.
Es ist auch erwähnenswert, dass Spalten eine Breite von haben 1fr und Zeilen haben ihre Höhe auf eingestellt Auto standardmäßig.
Spalten
Spalten sind die vertikalen Raumunterteilungen im CSS-Rasterlayout. Sie sind besonders nützlich, um das Auge des Betrachters zu leiten, die Lesbarkeit zu optimieren und Platz effizient zu nutzen.
Fügen Sie eine Spalte hinzu
Durch Klicken auf die Plus-Schaltfläche können einem CSS-Grid-Container zusätzliche Spalten hinzugefügt werden + befindet sich in der oberen rechten Ecke der Rasterauswahl-Steuerelemente.
Entfernen Sie eine Spalte
Spalten können aus einem CSS-Grid-Container entfernt werden, indem Sie auf die Papierkorbschaltfläche oben links in einem Spaltenbreitenregler klicken.
Wenn die Anzahl der Spalten or Reihen wird angepasst, wenn nicht genügend untergeordnete Container vorhanden sind, um das Layout korrekt anzuzeigen, Blocs fügt sie automatisch in den CSS-Grid-Container ein.
Es ist auch wichtig, sich daran zu erinnern, dass CSS Grid reines CSS zur Steuerung des Layouts verwendet, was bedeutet, dass Spalten hinzugefügt und entfernt werden können pro Haltepunkt.
Spaltenbreite
Standardmäßig ist die Breite einer Spalte auf eingestellt 1fr auf CSS Grid-Containern innerhalb Blocsdem „Vermischten Geschmack“. Seine fr Einheit steht für Bruch. Es stellt einen Bruchteil des verfügbaren Platzes im Grid-Container dar.
Bei Verwendung als Spaltenbreite 1fr bedeutet, dass die Säule einen Bruchteil des gesamten verfügbaren Platzes einnimmt. Wenn mehrere Spalten verwendet werden, verwenden Sie die fr Einheit wird der Raum entsprechend dem Bruchwert jeder Spalte im Verhältnis zur Summe aller Bruchwerte aller Spalten geteilt.
Die Breite einer Spalte kann pro Haltepunkt mithilfe des Größenänderungsgriffs am Steuerelement für die Spaltenbreite angepasst werden. Ziehen Sie diesen Griff links or Recht wird das anpassen fr Wert für die zugehörige Spalte in Schritten von 0.5.
Spaltenlücke
Sie können den Abstand dazwischen festlegen Spalten an jedem Haltepunkt, indem Sie den leeren Raum zwischen den Spalten innerhalb des Rastercontainers auf der Design-Leinwand ziehen.
Sie können die Spaltenabstandsmessung eines CSS-Grid-Containers auch durch zurücksetzen Rechtsklick im Raum zwischen den Spalten und Auswahl Breite zurücksetzen.
Reihen
Zeilen sind die horizontalen Raumunterteilungen im CSS-Grid-Layout. Sie stellen den logischen Fluss von Inhalten sicher und sorgen für die visuelle Ausrichtung.
Fügen Sie eine Zeile hinzu
Durch Klicken auf die Plus-Schaltfläche können einem CSS-Grid-Container zusätzliche Zeilen hinzugefügt werden + befindet sich in der unteren linken Ecke der Rasterauswahl-Steuerelemente.
Zeilen funktionieren etwas anders als Spalten, obwohl Sie weitere Zeilen hinzufügen können. Normalerweise wird die Anzahl der Zeilen basierend auf der Anzahl der Spalten und untergeordneten Container im übergeordneten Rastercontainer berechnet und automatisch angepasst.
Entfernen Sie eine Zeile
Das Entfernen von Zeilen unterscheidet sich ein wenig vom Entfernen von Spalten. Das Entfernen von Zeilen ist nur möglich, wenn die Anzahl der untergeordneten Container im Vergleich zur Anzahl der Zeilen im Rasterlayout negativ ist.
Wenn die Anzahl der untergeordneten Container für eine Zeile negativ ist, wird am oberen Rand des Steuerelements für die Zeilenhöhe (das keine untergeordneten Container enthält) eine Papierkorbschaltfläche angezeigt. Durch Klicken auf diese Schaltfläche wird die Zeile entfernt.
Zeilenhöhe
Die Standardhöhe einer Zeile ist auf eingestellt Auto auf CSS Grid-Containern innerhalb Blocsdem „Vermischten Geschmack“. Seine Auto Die Einheit weist das Raster im Wesentlichen an, die Höhe dieser Zeile basierend auf ihrem Inhalt automatisch zu bestimmen. Mit anderen Worten: Die Zeile ist so hoch wie der höchste Inhalt in den untergeordneten Rastercontainern dieser Zeile.
Die Höhe einer Spalte kann pro Haltepunkt mithilfe des Größenänderungsgriffs am Steuerelement für die Zeilenhöhe angepasst werden. Ziehen Sie diesen Griff up or nach unten Passt die Zeilenhöhe an Pixel.
Obwohl diese Option verfügbar ist, wird ihre Verwendung empfohlen Auto für Zeilenhöhen, da es flexibler hinsichtlich der Reaktionsfähigkeit des Layouts ist.
Zeilenlücke
Sie können den Abstand dazwischen festlegen Reihen an jedem Haltepunkt, indem Sie den leeren Raum zwischen den Zeilen im CSS-Grid-Container auf der Design-Leinwand ziehen.
Sie können die Zeilenabstandsmessung eines CSS-Grid-Containers auch durch zurücksetzen Rechtsklick im Raum zwischen den Spalten und Auswahl Höhe zurücksetzen.
Untergeordnete Container positionieren
Standardmäßig sind diese Container auf eingestellt Auto-Flow (passen in das Raster), können jedoch mithilfe benutzerdefinierter Klassen unabhängig voneinander angepasst werden, um innerhalb des übergeordneten Rastercontainers positioniert zu werden.
Um die Positionierung eines untergeordneten Rastercontainers im Raster anzupassen, müssen Sie ihn zunächst auswählen und eine benutzerdefinierte Klasse anwenden.
Verwendung der Klasseneditor, ist es jetzt möglich, Werte auf die anzuwenden Rasterelement Regeln für den ausgewählten untergeordneten Container, um ihn in seinem jeweiligen übergeordneten CSS-Grid-Container zu positionieren.
Spaltenanfang
Das Rasterspaltenstart Die Eigenschaft wird verwendet, um die Spaltenrasterlinie anzugeben, an der ein Rasterelement in einem Rasterlayout beginnt.
Spaltenende
Das Gitterspaltenende Die Eigenschaft wird verwendet, um anzugeben, wie viele Spalten ein Element umfassen wird, oder um die Spaltenrasterlinie anzugeben, an der ein Rasterelement in einem Rasterlayout endet.
Zeilenanfang
Das Rasterzeilenanfang Die Eigenschaft wird verwendet, um die Zeilenrasterlinie anzugeben, an der ein Rasterelement in einem Rasterlayout beginnt.
Zeilenende
Das Rasterzeilenende Die Eigenschaft wird verwendet, um anzugeben, wie viele Zeilen ein Element umfassen wird, oder um die Zeilenlinie anzugeben, an der ein Rasterelement in einem Rasterlayout endet.
Positionierungstechniken
Mithilfe der Eigenschaften „Spaltenanfang“, „Spaltenende“, „Zeilenanfang“ und „Zeilenende“ ist es möglich, untergeordnete Container innerhalb des übergeordneten CSS-Grid-Containers zu positionieren. Hier sind einige gängige Beispiele für Raster-Kind-Positionierungstechniken.
Alle Beispiele hier können hier weiter untersucht werden Blocs Beispielprojekt.
Spalten überspannen
Um einen untergeordneten Rastercontainer über mehrere Spalten zu erstrecken, wenden Sie eine Klasse auf den untergeordneten Container an und legen Sie dann fest Rasterelemente > Spalte > Ende Feldwert zu Spannweite gefolgt von der Anzahl der Spalten, über die Sie das untergeordnete Element verteilen möchten.
Übergreifen Sie Zeilen
Um einen untergeordneten Gittercontainer über mehrere Zeilen zu erstrecken, wenden Sie eine Klasse auf den untergeordneten Container an und legen Sie dann fest Rasterelemente > Zeile > Ende Feldwert zu Spannweite gefolgt von der Anzahl der Zeilen, über die Sie das untergeordnete Element verteilen möchten.
Horizontale Position ändern
In diesem Beispiel befindet sich der violette untergeordnete Container ursprünglich an der ersten horizontalen Position im Raster. Mit einer benutzerdefinierten Klasse wird er direkt in die zweite horizontale Position oder zweite Spalte verschoben.
Um einen untergeordneten Gittercontainer horizontal zu positionieren, wenden Sie eine Klasse auf den untergeordneten Container an und legen Sie dann fest Rasterelemente > Spalte > Start Geben Sie den Feldwert an die Spaltennummer an, in der Sie ihn positionieren möchten. Es ist auch wichtig, den festzulegen Rasterelemente > Zeile > Start Setzen Sie den Feldwert auf die Zeilennummer, in der er bleiben soll.
Vertikale Position ändern
In diesem Beispiel befindet sich der violette untergeordnete Container ursprünglich an der ersten vertikalen Position im Raster und wird mithilfe einer benutzerdefinierten Klasse nach unten in die zweite vertikale Position verschoben.
Um einen untergeordneten Gittercontainer vertikal zu positionieren, wenden Sie eine Klasse auf den untergeordneten Container an und legen Sie dann fest Rasterelemente > Zeile > Start Geben Sie den Feldwert an die Zeilennummer an, in der Sie ihn positionieren möchten.
Bei der Positionierung von untergeordneten Rastercontainern ist es wichtig zu berücksichtigen, dass auf andere untergeordnete Container im Raster möglicherweise widersprüchliche Klassenpositionierungsregeln angewendet werden, was zu unerwünschten Layoutfehlern führen kann. Achten Sie darauf, dass Ihre Grid-Klassen organisiert bleiben, um Verwirrung beim Erstellen mit CSS Grid zu vermeiden.
Weiterführende Literatur
Dieser Artikel richtet sich an Anfänger, die ihre ersten Schritte mit CSS Grid machen. Wenn Sie tiefergehende und fortgeschrittenere Informationen zu CSS Grid suchen, empfehlen wir Ihnen, diesen Einführungsleitfaden zu lesen CSS-Raster von CSS Tricks.