So tauschen Sie Spalten in einem Grid aus: Schritt für Schritt Anleitung

Wenn wir mit Webseiten-Layouts arbeiten, ist es manchmal notwendig, die Anzeigereihenfolge der Spalten zu ändern. Die Standardmethode besteht darin, die Reihenfolge der Elemente in der HTML-Struktur zu ändern. Dies ist jedoch möglicherweise nicht immer bequem oder möglich. In solchen Fällen hilft uns grid, eine neue Layout-Technologie, die es einfach macht, die Spalten ohne Änderungen im Dokument zu vertauschen.

Grid ist ein leistungsfähiges Werkzeug zum Erstellen flexibler und anpassungsfähiger Raster, bestehend aus Zellen, die sowohl horizontal als auch vertikal angeordnet werden können. Eine seiner wichtigsten Funktionen ist die Möglichkeit, die Anzeigereihenfolge von Elementen mithilfe der grid-template-areas-Eigenschaft zu ändern.

In diesem Artikel sehen wir uns schrittweise Anweisungen zur Verwendung von grid an, um die Anzeigereihenfolge der Spalten zu ändern. Wir werden auch die grundlegenden Prinzipien von Grid untersuchen und Codebeispiele zeigen, die Ihnen helfen, diese Technologie leicht zu verstehen.

Was ist ein Grid und wie funktioniert es

Ein Grid besteht aus zwei Hauptkomponenten: einem Container und Rasterelementen. Der Container definiert allgemeine Rasterparameter wie die Anzahl der Spalten, die Spaltenbreite und die Lücken zwischen ihnen. Die Rasterelemente befinden sich innerhalb des Containers und beanspruchen eine bestimmte Anzahl von Spalten und Zeilen.

Grid arbeitet nach dem Prinzip eines Rasters aus Spalten und Zeilen, das mit CSS-Eigenschaften festgelegt werden kann. Mit den Eigenschaften grid-template-columns und grid-template-rows können Sie die Anzahl und Breite der Spalten und Zeilen festlegen. Beispielsweise kann ein zweispaltiges Raster wie folgt definiert werden:

Колонка 1
Колонка 2

Dadurch wird ein Raster mit zwei gleichmäßigen Spalten in einem Container mit der Klasse "container" erstellt. Jedes Element mit der Klasse "item" belegt eine Spalte.

Mit Grid können Sie auch die Platzierung von Elementen mithilfe der Eigenschaften grid-column und grid-row steuern. Mit diesen Eigenschaften können Sie angeben, in welchen Spalten und Zeilen jedes Rasterelement platziert werden soll. Zum Beispiel:

Колонка 1 и 2
Колонка 1, Строка 2
Колонка 2, Строка 1

In diesem Beispiel nimmt das erste Element des Rasters zwei Spalten (erste bis zweite) und eine Zeile ein, das zweite Element nimmt eine Spalte (erste) und die zweite Zeile ein, und das dritte Element nimmt eine Spalte (zweite) und die erste Zeile ein.

Grid ist ein leistungsfähiges Werkzeug zum Erstellen komplexer Gitterstrukturen auf einer Webseite. Es bietet eine breite Palette von Funktionen zur Steuerung der Position und Größe von Elementen und ist damit ein unverzichtbares Werkzeug für die Erstellung eines adaptiven und flexiblen Layouts.

Arbeiten mit Grid: Grundlegende Regeln und Konzepte

Die grundlegenden Regeln für die Arbeit mit Grid umfassen die folgenden Konzepte:

1. Container (grid container) - Ein Element, das für alle Rasterelemente übergeordnet ist. Es werden Grid-Eigenschaften wie display: grid verwendet, um ein Raster zu erstellen.

2. Platzieren von Elementen (grid items) - die untergeordneten Elemente des Containers, die im Raster platziert werden sollen. Sie können die Anzahl der Elemente in einer Zeile und Spalte sowie deren Größe festlegen.

3. Raster (grid) - eine Sammlung von Zeilen und Spalten, die innerhalb eines Containers definiert sind. Sie können mit den Eigenschaften grid-template-rows und grid-template-columns festgelegt werden.

4. Zelle (grid cell) - ein rechteckiger Bereich, der durch den Schnittpunkt von Zeile und Spalte gebildet wird. Rasterelemente werden in Zellen platziert.

5. Vorlagen (grid templates) - bestimmen Sie die Größe und Anzahl der Zeilen und Spalten im Raster. Mithilfe der Eigenschaften grid-template-rows und grid-template-columns können Sie Vorlagen für Zeilen und Spalten angeben.

Wenn Sie diese Konzepte verstehen und richtig verwenden, können Sie ein flexibles und benutzerfreundliches Raster erstellen, um Elemente und Stile auf einer Webseite zu platzieren.

Schritt 1: Erstellen eines CSS-Selektors für den gewünschten Block

Bevor Sie beginnen, die Spalten im Grid zu vertauschen, müssen Sie einen CSS-Selektor für den ausgewählten Block erstellen.

Verwenden Sie eine Kombination von Selektoren, um einen Stil für den gewünschten Block festzulegen. Wenn Sie beispielsweise Spalten in einem Block mit der Klasse "container" austauschen möchten, sieht der CSS-Selektor wie folgt aus:

Beachten Sie, dass im Beispiel ein Punkt vor dem Klassennamen verwendet wird, um anzugeben, dass wir Elemente mit dieser Klasse auswählen.

Schritt 2: Ändern der Spaltenreihenfolge mit grid-template-areas

Verwenden Sie die grid-template-areas-Eigenschaft, um die Spaltenreihenfolge im Raster zu ändern. Mit dieser Eigenschaft können Sie benannte Bereiche im Raster festlegen, in denen sich die Elemente befinden sollen.

Im Folgenden finden Sie ein Beispiel für die Verwendung von grid-template-areas zum Ändern der Spaltenreihenfolge:

In diesem Beispiel wird ein Gitter mit drei Spalten erstellt. Die Lautsprecher haben entsprechende Bereiche: "header", "sidebar", "content" und "footer". Die Spaltenreihenfolge wird durch den Wert der grid-template-areas-Eigenschaft festgelegt.

Indem wir die grid-area-Eigenschaft auf jedes Element anwenden, geben wir an, in welchen Bereich es fallen soll. Wenn wir also die Reihenfolge der Bereiche in der Eigenschaft grid-template-areas ändern, ändern wir die Reihenfolge der Spalten im Raster.

Schritt 3: Verwenden von grid-template-columns und grid-auto-columns

Die folgenden zwei Eigenschaften grid-template-columns und grid-auto-columns wird verwendet, um die Größe der Spalten im Raster festzulegen.

Eigenschaft grid-template-columns definiert die Spaltengrößen explizit. Sie können Werte in Pixeln (px), Prozentwerten (%) oder anderen verfügbaren Einheiten verwenden. Zum Beispiel:

Im obigen Beispiel ist die erste Spalte 100 Pixel breit, die zweite Spalte 200 Pixel breit und die dritte Spalte nimmt den verbleibenden Platz ein, der mit einer Einheit angegeben ist fr (fractional unit).

Eigenschaft grid-auto-columns bestimmt die Spaltengrößen automatisch. Sie können auch Werte in Pixeln, Prozentsätzen und anderen verfügbaren Einheiten verwenden. Zum Beispiel:

Im obigen Beispiel haben alle Spalten die gleiche Breite, die einer gleichdimensionalen Einheit entspricht.

Schritt 4: Anpassen der Spaltenreihenfolge mit grid-template-rows

Wenn Sie die Spalten im Raster mit CSS Grid austauschen müssen, können Sie die Eigenschaft verwenden grid-template-rows. Mit dieser Eigenschaft können Sie die Anzahl und Größe der Zeilen im Raster festlegen.

Um die Spalten neu zu ordnen, müssen Sie die Einstellungen für die Rasterzeilen festlegen. Wenn Sie beispielsweise zwei Spalten haben und diese austauschen möchten, können Sie den folgenden Code verwenden:

Im obigen Code setzen wir zwei Zeilen in einem Raster mit einer Eigenschaft grid-template-rows. Beide Zeilen haben eine Größe von 1fr, was bedeutet, dass sie den gleichen Platz im Raster einnehmen. Dadurch nimmt die erste Spalte den Platz ein, der für die zweite Zeile reserviert ist, und die zweite Spalte nimmt den Platz ein, der für die erste Zeile reserviert ist.

Sie können nicht nur feste Zeilengrößen festlegen, sondern auch ein Schlüsselwort verwenden auto um die Größe der Zeilen im Raster automatisch zu bestimmen.

Im obigen Code hat die erste Zeile automatisch die Größe, die ihrem Inhalt entspricht, und die zweite Zeile nimmt den verbleibenden Platz im Raster ein.

Unter Verwendung der Eigenschaft grid-template-rows. Sie können die Reihenfolge der Spalten im Raster anpassen und interessante Layouts für Ihre Webseiten erstellen.

Schritt 5: Praktische Beispiele und Empfehlungen

Nachdem wir die grundlegenden Prinzipien der Arbeit mit Grid und die Methoden zum Verschieben und Neuanordnen von Spalten untersucht haben, schauen wir uns einige praktische Beispiele an und geben Ihnen Empfehlungen für ihre Verwendung.

Beispiel 1: Verschiebt die Hauptspalte an den Anfang.

Wenn Sie ein Gitter mit mehreren Spalten haben und eine davon die Hauptspalte ist, kann es manchmal notwendig sein, diese Spalte an den Anfang des Rasters zu verschieben. Dazu müssen Sie die grid-column-start-Eigenschaft verwenden und die Startposition der Hauptspalte angeben. Wenn Ihr Raster beispielsweise 4 Spalten hat und sich die Hauptspalte an der zweiten Position befindet, müssen Sie den Wert grid-column-start: 1 festlegen.

Beispiel 2: Austausch von zwei Lautsprechern.

Manchmal kann es Aufgabe sein, zwei Spalten in einem Raster auszutauschen. Dazu müssen Sie die Eigenschaften grid-column-start und grid-column-end verwenden und die Start- und Endposition beider Spalten angeben. Wenn Sie beispielsweise die erste und zweite Spalte in einem Raster austauschen möchten, müssen Sie für die erste Spalte grid-column-start: 2 und für die zweite Spalte grid-column-start: 1 und grid-column-end: 2 festlegen.

Empfehlung: Bei der Arbeit mit Grid wird empfohlen, die spaltenspezifische Benennung zu verwenden, um zukünftige Änderungen am Raster zu erleichtern. Außerdem sollten Sie die Haupt- und Hilfsspalten voneinander trennen, damit Sie das Raster schneller nach Layout anpassen können.

Indem Sie diese praktischen Beispiele anwenden und die Richtlinien befolgen, können Sie das Layout der Spalten im Grid flexibler steuern und ansprechende Layouts für Ihre Website erstellen.