sieben M?glichkeiten, Webelemente mit CSS Grid

zu layern

(Dieser Artikel wurde am 23. M?rz 2017 aktualisiert. Spezifischer Inhalt: Browser -Unterstützung für CSS -Gitterlayout)

In diesem Artikel werden sieben M?glichkeiten eingeführt, um Elemente auf Webseiten mithilfe des Grid -Layout -Moduls zu platzieren.

sitePoint hat zuvor "Einführung in das CSS -Gitterlayout" ver?ffentlicht. Kürzlich schrieb ich auch "die aktuelle Situation des Entwurfs der Arbeit von CSS Grid Layout".

Hier liegt der Fokus ausschlie?lich auf der spezifischen Art und Weise, Elemente auf einer Webseite mithilfe von CSS -Raster zu layern. Lassen Sie uns nun sie einzeln vorstellen.

Schlüsselpunkte

• CSS -Gitterlayout erm?glicht die Flexibilit?t, Elemente auf Webseiten mit mehreren Methoden wie einzelnen Attributen, grid-row und grid-column, grid-area, span -Schulw?rtern, mit den Namen Zeilen genannt, mit gebr?uchlichen Namen und span Namenszeile und benannte Gitterbereich für Schlüsselw?rter.
Das Attribut
• grid-area erm?glicht die Angabe der oberen linken und unteren rechten Ecken eines Elements, w?hrend das Schlüsselwort span verwendet werden kann, um die Anzahl der Spalten oder Zeilen festzulegen, das das Element erstreckt.
• Namensleitungen helfen dabei, komplexe Layouts zu organisieren. Jede Zeile weist einen Namen gem?? dem inhaltlichen Inhaltsart zu. Dieser Vorgang kann durch die Verwendung eines gemeinsamen Namens für alle Gitterzeilen in einem bestimmten Abschnitt und Angabe der Anzahl dieser Zeilen, die das Element mit dem Schlüsselwort span umfasst, weiter vereinfacht werden.
• Namensnetzbereiche erm?glichen die Zuordnung von Namen in verschiedenen Bereichen anstelle von Zeilen, wodurch die Elementzuweisung einfach und unkompliziert wird. Der benannte Netzbereich kann jedoch derzeit nur Rechtecke sein.

Browserunterstützung für CSS Grid Layout

derzeit hat das Netzlayout keinen konsistenten Browserunterstützung. Ab M?rz 2017 haben die neuesten Versionen von Chrome- und Firefox -Browsern jedoch standardm??ig das CSS -Gitterlayout unterstützt. IE unterstützt immer noch alte Implementierungen, Opera muss experimentelle Webplattformflags erm?glichen, w?hrend Safari sie überhaupt nicht unterstützt. Um alle Beispiele in diesem Artikel korrekt zu verwenden, wird empfohlen, Chrome oder Firefox zu verwenden. Für Leser, die aus irgendeinem Grund Probleme mit diesen Browsern gefunden haben, habe ich Screenshots hinzugefügt, um das Endergebnis jeder Technik zu zeigen.

Methode 1: Verwenden Sie ein einzelnes Attribut, um alle Inhalte

anzugeben

Dies ist die Version, mit der Elemente in unseren vorherigen Artikeln aufgeführt sind. Diese Methode ist langwierig, aber leicht zu verstehen. Verwenden Sie im Grunde die Eigenschaften grid-column-start/grid-column-end und grid-row-start/grid-row-end, um die linke und obere und untere Grenzen des Elements anzugeben. Wenn das Element nur eine Zeile oder Spalte umfasst, k?nnen Sie das Attribut -end weglassen, sodass Sie weniger CSS schreiben müssen.

In der folgenden Demonstration wurde Element A in der zweiten Zeile und in der zweiten Spalte unter Verwendung der folgenden CSS platziert:

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Der gleiche Effekt kann mit den folgenden Methoden erreicht werden:

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Codepen Demo Link

Methode 2: Verwenden Sie grid-row und grid-column

Obwohl das CSS in unserem ersten Beispiel lesbar und leicht verst?ndlich ist, müssen wir vier verschiedene Eigenschaften verwenden, um ein einzelnes Element zu platzieren. Wir k?nnen nur zwei Eigenschaften ( und grid-column) anstelle von vier Eigenschaften verwenden. Beide Eigenschaften nehmen zwei durch Schr?gstriche getrennte Werte auf, wobei der erste Wert die Startlinie des Elements bestimmt und der zweite Wert die Endzeile des Elements bestimmt. grid-row

Folgendes ist die Syntax, die Sie für die Verwendung dieser Eigenschaften ben?tigen:

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

Um Punkt C in der unteren rechten Ecke des Netzes zu platzieren, k?nnen wir die folgenden CSS verwenden:

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

Codepen Demo Link

Methode 3: Verwenden Sie grid-area

Technisch gesehen belegen die Projekte, die wir legen, einen bestimmten Bereich der Webseite. Die Grenze dieses Elements wird durch die Werte bestimmt, die wir für die Gitterlinien bereitstellen. Alle diese Werte k?nnen sofort mit dem Attribut bereitgestellt werden. grid-area

Folgendes ist das Erscheinungsbild von CSS bei der Verwendung dieser Eigenschaft:

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

Wenn Sie Probleme haben, sich an die richtige Reihenfolge dieser Werte zu erinnern >) Ecke des Elements.

row-start Wie beim vorherigen Beispiel, um Punkt C in der unteren rechten Ecke des Netzes zu platzieren, k?nnen wir das folgende CSS verwenden: col-start row-end col-end

Codepen Demo Link

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

Methode 4: Verwenden Sie das Schlüsselwort

Wenn Sie Elemente ablegen, k?nnen Sie zus?tzlich zum Angeben der Endzeile das Schlüsselwort span verwenden, um die Anzahl der Spalten oder Zeilen festzulegen, die ein bestimmtes Element erstrecken.

Folgendes ist die richtige Syntax für die Verwendung des Schlüsselworts

: span

Wenn Ihr Element nur eine Zeile oder Spalte umfasst, k?nnen Sie das Schlüsselwort

und seinen Wert weglassen. span

Diesmal platzieren wir Artikel C in der oberen linken Ecke des Netzes. Wir k?nnen dies mit den folgenden CSS tun.

.c {
  grid-area: 2 / 2 / 4 / 4;
}

span

Codepen Demo Link

.selector {
  grid-row: row-start / span row-span-value;
  grid-column: col-start / span col-span-value;
}

Methode 5: Verwenden Sie die benannte Zeile

Bisher haben wir Rohnummern verwendet, um Gitterlinien anzugeben, die einfach zu bedienen sind, wenn wir mit einfachen Layouts umgehen. Es kann jedoch etwas unordentlich sein, wenn Sie mehrere Elemente platzieren müssen. In den meisten F?llen fallen Elemente auf der Seite in eine bestimmte Kategorie. Beispielsweise kann der Header von der Spalte Zeile C1 bis zur Spalte Zeile C2 und von der Zeilenzeile R1 bis zur Zeile R2 stammen. Es w?re viel einfacher, alle Zeilen richtig zu nennen und dann Elemente mit diesen Namen anstelle von Zahlen zu platzieren.

Erstellen wir ein sehr grundlegendes Layout, um das Konzept klarer zu machen. Zun?chst müssen wir das auf den Gitterbeh?lter angewendete CSS ?ndern:

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

Was ich oben getan habe, ist, alle Zeilen auf der Grundlage des Inhaltstyps Namen zuzuweisen, den sie enthalten. Die Idee hier ist, Namen zu verwenden, die uns über den Ort verschiedener Elemente informieren. In diesem speziellen Beispiel umfasst unser Header -Element alle Spalten. Das Zuweisen der Namen "Head-Col-Start" und "Head-Col-End" zu den ersten bzw. letzten Spaltenzeilen zeigt daher deutlich an, dass diese Linien die linken und rechten Enden des Headers darstellen. Alle anderen Zeilen k?nnen auf ?hnliche Weise benannt werden. Nachdem alle Zeilen benannt wurden, k?nnen wir mit den folgenden CSS alle Elemente platzieren.

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

Obwohl wir mehr CSS als gew?hnlich schreiben müssen, k?nnen wir jetzt den Ort der Elemente verstehen, indem wir nur die CSS betrachten.

Codepen Demo Link

Methode 6: Verwenden Sie eine Namenszeile mit einem gebr?uchlichen Namen und span Schlüsselwort

In der vorherigen Methode haben alle Zeilen unterschiedliche Namen und markieren den Startpunkt, den Mittelpunkt oder den Endpunkt des Elements. Beispielsweise markieren "Content-Col-Start" und "Content-Col-Mid" den Ausgangspunkt und den Mittelpunkt des Inhaltsteils unserer Webseite. Wenn der Inhalt teilweise mehr Zeilen abdeckt, müssen wir andere Zeilennamen wie "Content-Col-Mid-One", "Content-Col-Mid-Two" usw. erstellen.

In diesem Fall k?nnen wir nur einen gebr?uchlichen Namen für alle Gitterzeilen im Inhaltsparteil verwenden, z. B. "Inhalt", und dann das Schlüsselwort span verwenden, um die Anzahl dieser Zeilen anzugeben, die das Element überspannt. Wir k?nnen auch nur eine Nummer neben dem Zeilennamen erw?hnen, um die Anzahl der Zeilen oder Spalten festzulegen, die das Element überspannen wird.

Mit dieser Methode sieht CSS so aus:

.selector {
  grid-row: row-start / row-end;
  grid-column: col-start / col-end;
}

Wie bei der letzten Methode müssen Sie auch die CSS des Gitterbeh?lters ?ndern.

.c {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
}

Jede benannte Spaltenzeile hat den gleichen Namen und bezeichnet ihre Breite (in Pixel), und jede benannte Zeilenzeile repr?sentiert die Zeilen, die von einem bestimmten Webseitenabschnitt abgedeckt sind. In dieser Demo habe ich einen Anzeigenabschnitt unter der Seitenleiste vorgestellt. Dies ist CSS:

.selector {
  grid-area: row-start / col-start / row-end / col-end;
}

Codepen Demo Link

Methode 7: Verwenden Sie den benannten Gitterbereich

Wir k?nnen Elemente platzieren, indem wir verschiedenen Regionen Namen zuweisen, anstatt Zeilen zu verwenden. Auch hier müssen wir einige ?nderungen an den CSS des Gitterbeh?lters vornehmen.

Die CSS des Gitterbeh?lters sollten jetzt so aussehen:

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

einzelne Punkte (.) Oder eine Reihe von Punkten erzeugt eine leere Zelle ohne irgendetwas. Alle Zeichenfolgen müssen die gleiche Anzahl von Spalten haben. Deshalb müssen wir Punkte hinzufügen, anstatt sie vollst?ndig leer zu lassen. Derzeit kann der benannte Netzbereich nur rechteckig sein. Dies kann sich jedoch in zukünftigen Versionen der Spezifikation ?ndern. Schauen wir uns die CSS für alle Elemente an.

.a {
  grid-column-start: 2;
  grid-row-start: 2;
}

Nachdem alle Gitterbereiche definiert wurden, ist es sehr einfach, sie verschiedenen Elementen zuzuweisen. Denken Sie daran, dass Sie beim Zuweisen von Namen nicht Sonderzeichen verwenden k?nnen. Dies wird die Erkl?rung ungültig machen.

Codepen Demo Link

Schlussfolgerung

Das ist es! Wir haben sieben verschiedene M?glichkeiten für die Verwendung von CSS -Mesh -Layout zu Layoutelementen abgedeckt. M?chten Sie Tipps zu diesem Artikel mit anderen Lesern teilen? Welche Methode bevorzugen Sie in Ihrem eigenen Projekt? Bitte lassen Sie es uns in den Kommentaren wissen.

CSS Grid Layout FAQ

Was ist der Unterschied zwischen CSS -Gitterlayout und Flexbox?

CSS -Gitterlayout und Flexbox sind beide leistungsstarke Layoutsysteme in CSS. Obwohl sie ?hnlich aussehen, sind sie für verschiedene Arten von Layoutaufgaben ausgelegt. Flexbox ist ein eindimensionales Layoutmodell, das für das Layout auf einer Dimension nach dem anderen, entweder eine Zeile oder eine Spalte, ausgelegt ist. Das CSS-Gitterlayout hingegen ist ein zweidimensionales System, das bedeutet, dass es sowohl Spalten als auch Zeilen verarbeiten kann, was es zu einer idealen Wahl für das Entwerfen komplexer Weblayouts macht.

Wie erstelle ich ein reaktionsschnelles Layout mit CSS Grid?

CSS -Gitter macht das Erstellen reaktionsschneller Layouts sehr einfach. Sie k?nnen die "FR" -Einheit verwenden, die einen Teil des verfügbaren Raums im Gitterbeh?lter darstellt. Durch die Nutzung dieses Ger?ts k?nnen Sie flexible Netzspuren erstellen, die gem?? der Ansichtsfenstergr??e ge?ndert werden. Darüber hinaus k?nnen Sie Medienabfragen verwenden, um das Netzlayout an verschiedenen Ansichtsfenster zu ?ndern, um eine bessere Kontrolle über reaktionsschnelle Designs zu erhalten.

Kann ich gleichzeitig CSS -Raster und Flexbox verwenden?

Ja, CSS -Gitter und Flexbox k?nnen zusammen für Layouts verwendet werden. Sie erg?nzen sich gut. Sie k?nnen beispielsweise CSS -Gitter verwenden, um die gesamte Seitenstruktur zu layout und dann mit Flexbox einzelne Komponenten oder Teile innerhalb eines Netzbereichs zu lagern.

Wie kann ich Elemente im CSS -Netz ausrichten?

CSS-Gitter bietet einige Eigenschaften für die Ausrichtung von Elementen, einschlie?lich "Justify-Items", "Align-Items", "Justify-Self" und "Align-Self". Diese Eigenschaften steuern, wie Gitterelemente entlang der Zeilen- und S?ulenachsen ausgerichtet sind. Sie k?nnen Elemente auf Start, Ende, Zentrum ausrichten oder sie strecken, um den Netzbereich zu füllen.

Was sind Gitterlinien im CSS -Gitterlayout?

In CSS -Gitterlayout sind Gitterlinien Teiler, die die Gitterstruktur ausmachen. Sie k?nnen horizontal oder vertikal sein und ab 1 nummeriert. Sie k?nnen Rasterelemente zwischen zwei beliebigen Zeilen platzieren, wodurch Sie viel Flexibilit?t beim Layoutdesign erhalten.

Wie schafft man Lücken zwischen Grid -Projekten?

CSS-Gitter liefert die Eigenschaft "Gap" (ehemals "Raster-Lack"), mit der Sie R?ume zwischen Gitterartikeln erstellen k?nnen. Diese Eigenschaft kann ein oder zwei Werte erfolgen und die Gr??e der Lücke zwischen Zeilen und Spalten angeben.

Was ist das Attribut "Grid-Template-Areas" in CSS-Gitter?

Mit der Eigenschaft "Grid-Template-Areas" in CSS-Gitter k?nnen Sie Gitterlayouts erstellen, indem Sie benannte Gitterbereiche verweisen. Sie k?nnen diese Bereiche mithilfe der Eigenschaft "Grid-Bereich" im Grid-Projekt definieren und sie dann visuell in Ihrem CSS-Code mit der Eigenschaft "Grid-Template-Areas" ordnen.

Wie überlappen Sie Rasterelemente in CSS -Netz?

In CSS -Gitter k?nnen Sie leicht Gitterelemente überlappen, indem Sie Gitterelemente in derselben Netzzelle platzieren oder einen Netzbereich für mehrere Zellen angeben. Dies kann mit den Eigenschaften "Grid-S?ule" und "Grid-Row" im Grid-Projekt erfolgen.

Was ist die "FR" -Einheit im CSS -Netz?

Die "FR" -Einheit im CSS -Gitter steht für "Fraktion". Es repr?sentiert einen Teil des verfügbaren Raums im Rasterbeh?lter. Mit diesem Ger?t k?nnen Sie flexible Netzspuren erstellen, die sich auf den verfügbaren Raum vergr??ern, um reaktionsschnelle Layouts zu erstellen.

Wird CSS -Gitter in modernen Browsern weit verbreitet?

Ja, CSS -Gitter wird in allen modernen Browsern, einschlie?lich Chrom, Firefox, Safari und Edge, weit verbreitet. Es wird jedoch im Internet Explorer nicht unterstützt. Wenn Sie IE unterstützen müssen, m?chten Sie m?glicherweise eine alternative Layout-Methode wie Flexbox oder Floating-basiertes Layout verwenden.

Beachten Sie, dass ich das Bildformat auf .webp beibehalten und seinen ursprünglichen Link beibehalten habe. Da ich nicht direkt auf CodePen zugreifen kann, habe ich den Codepen -Link durch einen Platzhalter ersetzt. Sie müssen diese Platzhalter durch den tats?chlichen Codepen -Link selbst ersetzen.

Das obige ist der detaillierte Inhalt vonSieben M?glichkeiten, wie Sie Elemente mit CSS Grid Layout platzieren k?nnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!