Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Tutorial zum CSS-Raster-Rasterlayout

I. Übersicht

Das Rasterlayout (Grid) ist die leistungsstärkste CSS-Layoutlösung.

Es unterteilt Webseiten in Raster und verschiedene Raster können beliebig kombiniert werden, um verschiedene Layouts zu erstellen. Effekte, die früher nur durch komplexe CSS-Frameworks erzielt werden konnten, sind heute in Browser eingebaut.

Ein Layout wie das oben abgebildete ist die Besonderheit des Grid-Layouts.

Das Rasterlayout hat gewisse Ähnlichkeiten mit dem Flex-Layout. Beide können die Position mehrerer Elemente innerhalb des Containers angeben. Es gibt jedoch wichtige Unterschiede.

Das Flex-Layout ist ein Achsenlayout und kann nur die Position des „Elements“ gegenüber der Achse angeben, die als betrachtet werden kannEindimensionales Layout . Das Rasterlayout unterteilt den Container in „Zeilen“ und „Spalten“, generiert Zellen und gibt dann die Zelle an, in der sich das „Element“ befindet, das betrachtet werden kann2D-Layout . Das Rasterlayout ist weitaus leistungsfähiger als das Flex-Layout.

2. Grundkonzepte

Bevor Sie das Rasterlayout erlernen, müssen Sie einige grundlegende Konzepte verstehen.

2.1 Container und Projekte

Ein Bereich mit einem Rasterlayout wird als „Container“ bezeichnet. Die untergeordneten Elemente, die die Rasterpositionierung innerhalb des Containers verwenden, werden „Elemente“ genannt.

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>
1
2
3
4
5

Im obigen Code das äußerste<div>Das Element ist der Behälter und die drei inneren<div>Elemente sind Gegenstände.

Beachten: Das Projekt kann nur das untergeordnete Element der obersten Ebene des Containers sein und enthält keine untergeordneten Elemente des Projekts, wie z. B. den obigen Code<p> Elemente sind keine Gegenstände. Das Rasterlayout wirkt sich nur auf Projekte aus.

2.2 Zeilen und Spalten

Der horizontale Bereich innerhalb des Containers wird als „Zeile“ und der vertikale Bereich als „Spalte“ bezeichnet.

Im Bild oben sind die horizontalen dunklen Bereiche „Zeilen“ und die vertikalen dunklen Bereiche „Spalten“.

2.3 Zellen

Der Schnittbereich von Zeilen und Spalten wird als „Zelle“ bezeichnet.

Unter normalen Umständen,nOK undmSpalten werden produzierenn x m Zellen. Beispielsweise ergeben 3 Zeilen und 3 Spalten 9 Zellen.

2.4 Gitterlinien

Die Linien, die das Gitter unterteilen, werden „Gitterlinien“ genannt. Horizontale Gitterlinien teilen Zeilen und vertikale Gitterlinien teilen Spalten.

Unter normalen Umständen,nOKn + 1Wurzel horizontale Gitterlinie,mGelistetm + 1Es gibt beispielsweise drei vertikale Gitterlinien, es gibt vier horizontale Gitterlinien in drei Reihen.

Das Bild oben ist ein 4 x 4-Raster mit insgesamt 5 horizontalen Gitterlinien und 5 vertikalen Gitterlinien.

3. Containereigenschaften

Die Eigenschaften des Rasterlayouts sind in zwei Kategorien unterteilt. Ein Typ ist im Container definiert und wird als Containereigenschaften bezeichnet; der andere Typ ist im Projekt definiert und wird als Projekteigenschaften bezeichnet. In diesem Teil werden zunächst Containereigenschaften vorgestellt.

3.1 Anzeigeattribut

display: gridGibt einen Container zur Verwendung eines Rasterlayouts an.

div {
  display: grid;
}
1
2
3

Das Bild oben istdisplay: gridvonWirkung。

Standardmäßig sind Containerelemente Elemente auf Blockebene, sie können jedoch auch als Inline-Elemente festgelegt werden.

div {
  display: inline-grid;
}
1
2
3

Der obige Code gibt andivIst ein Inline-Element, das intern ein Rasterlayout verwendet.

Das Bild oben istdisplay: inline-gridvonWirkung。

Beachten Sie, dass nach der Einstellung auf Rasterlayout die Container-Unterelemente (Elemente)float、display: inline-block、display: table-cell、vertical-alignUndcolumn-*Alle anderen Einstellungen werden ungültig.

3.2 Grid-Template-Columns-Attribut, Grid-Template-Rows-Attribut

Nachdem der Container das Rasterlayout angegeben hat, muss er die Zeilen und Spalten unterteilen.grid-template-columnsEigenschaften definieren die Spaltenbreite jeder Spalte.grid-template-rowsDie Eigenschaft definiert die Zeilenhöhe jeder Zeile.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
1
2
3
4
5

obiger CodeGibt ein Raster mit drei Zeilen und drei Spalten an. Die Spaltenbreite und Zeilenhöhe sind beide100px。

Anstatt absolute Einheiten zu verwenden, können Sie auch Prozentsätze verwenden.

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}
1
2
3
4
5

（1）wiederholen()

Manchmal ist es sehr mühsam, denselben Wert wiederholt zu schreiben, insbesondere wenn viele Gitter vorhanden sind.Zu diesem Zeitpunkt können Sie verwendenrepeat() Funktion, die wiederholte Werte vereinfacht.Der obige Code verwendetrepeat()Wie folgt umgeschrieben.

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
1
2
3
4
5

repeat()Akzeptiert zwei Parameter, der erste Parameter ist die Anzahl der Wiederholungen (3 im obigen Beispiel) und der zweite Parameter ist der zu wiederholende Wert.

repeat()Es ist in Ordnung, ein Muster zu wiederholen.

grid-template-columns: repeat(2, 100px 20px 80px);
1

obiger CodeEs sind 6 Spalten definiert, die Breite der ersten und vierten Spalte beträgt100px, die zweite und fünfte Spalte20px, die dritte Spalte und die sechste Spalte80px。

(2) Schlüsselwort zum automatischen Ausfüllen

Manchmal ist die Größe der Zelle festgelegt, die Größe des Containers jedoch nicht definiert.Wenn Sie möchten, dass jede Zeile (oder Spalte) so viele Zellen wie möglich enthält, können Sie Folgendes verwendenauto-fillSchlüsselwörter stehen für die automatische Vervollständigung.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
1
2
3
4

obiger CodeStellt die Breite jeder Spalte dar100px, und füllt sich dann automatisch, bis der Container keine Spalten mehr aufnehmen kann.

Außer, abgesondert, ausgenommenauto-fillund ein Schlüsselwortauto-fit , das Verhalten beider ist im Grunde das gleiche.Nur wenn der Behälter breit genug ist, um alle Zellen in einer Reihe aufzunehmen, und die Zellenbreite nicht festgelegt istVerhaltensunterschiede：auto-fillDie verbleibende Breite wird mit leeren Zellen gefüllt.auto-fitwird versuchen, die Breite der Zelle zu vergrößern.

(3) fr-Schlüsselwort

Um proportionale Beziehungen bequem auszudrücken, ist ein Rasterlayout vorgesehenfr Schlüsselwort (Kurzform für Bruch, was „Fragment“ bedeutet).Wenn die Breiten der beiden Spalten sind1frUnd2fr, was bedeutet, dass letzteres doppelt so groß ist wie ersteres.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
1
2
3
4

obiger CodeStellt zwei Spalten gleicher Breite dar.

frKann in Verbindung mit absoluten Längeneinheiten verwendet werden, was sehr praktisch ist.

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
1
2
3
4

obiger Codebedeutet, dass die erste Spalte 150 Pixel breit ist und die zweite Spalte halb so breit wie die dritte Spalte.

(4) minmax ()

minmax() Die Funktion erzeugt einen Längenbereich und gibt an, dass die Länge innerhalb dieses Bereichs liegt. Es akzeptiert zwei Parameter, den Minimalwert und den Maximalwert.

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
1

Im obigen Code,minmax(100px, 1fr)Gibt an, dass die Spaltenbreite nicht kleiner ist als100px,nicht größer als1fr。

(5)Auto-Schlüsselwort

autoDie Länge der Schlüsselwortdarstellung wird vom Browser selbst bestimmt.

grid-template-columns: 100px auto 100px;
1

Im obigen Code entspricht die Breite der zweiten Spalte grundsätzlich der maximalen Breite der Zelle in der Spalte, sofern der Zelleninhalt nicht festgelegt istmin-width, und dieser Wert ist größer als die maximale Breite.

(6) Name der Gitterlinien

grid-template-columnsAttribute undgrid-template-rowsIn den Eigenschaften können Sie auch eckige Klammern verwenden, um den Namen jeder Rasterlinie anzugeben, damit Sie später leichter darauf zurückgreifen können.

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1
2
3
4
5

Der obige Code gibt ein Rasterlayout mit 3 Zeilen x 3 Spalten an, sodass es 4 vertikale und 4 horizontale Rasterlinien gibt. In den eckigen Klammern stehen die Namen der acht Zeilen.

Das Rasterlayout ermöglicht mehrere Namen für dieselbe Zeile, z[fifth-line row-5]。

(7) Layoutbeispiel

grid-template-columns Eigenschaften sind für das Webseitenlayout sehr nützlich. Für das zweispaltige Layout ist nur eine Codezeile erforderlich.

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
1
2
3
4

Der obige Code setzt die linke Spalte auf 70 % und die rechte Spalte auf 30 %.

Auch das traditionelle Zwölfraster-Layout ist leicht zu schreiben.

grid-template-columns: repeat(12, 1fr);
1

3.3 Grid-Row-Gap-Attribut, Grid-Column-Gap-Attribut, Grid-Gap-Attribut

grid-row-gapDie Eigenschaft legt den Abstand zwischen Zeilen (Zeilenabstand) fest.grid-column-gapDie Eigenschaft legt den Abstand zwischen Spalten (Spaltenabstand) fest.

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
1
2
3
4

obiger CodeMitte,grid-row-gapWird verwendet, um den Zeilenabstand festzulegen.grid-column-gapWird verwendet, um den Spaltenabstand festzulegen.

grid-gapDie Eigenschaften sindgrid-column-gapUndgrid-row-gapDie kombinierte Abkürzungsform von , die Syntax ist wie folgt.

grid-gap: <grid-row-gap> <grid-column-gap>;
1

Daher entspricht der obige CSS-Code dem folgenden Code.

.container {
  grid-gap: 20px 20px;
}
1
2
3

Wenngrid-gapDer zweite Wert wird weggelassen und der Browser betrachtet den zweiten Wert als gleich dem ersten Wert.

Nach den neuesten Standards sind die oben genannten drei Attributnamengrid-Das Präfix wurde entfernt,grid-column-gapUndgrid-row-gapgeschrieben alscolumn-gapUndrow-gap，grid-gapgeschrieben alsgap。

3.4 Grid-Template-Areas-Eigenschaft

Mit dem Rasterlayout können Sie „Bereiche“ festlegen, die aus einzelnen oder mehreren Zellen bestehen.grid-template-areasEigenschaften werden zum Definieren von Bereichen verwendet.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';
}
1
2
3
4
5
6
7
8
9

Der obige Code teilt zunächst 9 Zellen und benennt sie dannaankommeniDie neun Bereiche entsprechen jeweils diesen neun Zellen.

Die Schreibmethode zum Zusammenführen mehrerer Zellen in einem Bereich ist wie folgt.

grid-template-areas:
  'a a a'
  'b b b'
  'c c c';
1
2
3
4

Der obige Code unterteilt 9 Zellen ina、b、cdrei Bereiche.

Unten finden Sie ein Beispiellayout.

grid-template-areas:
  'header header header'
  'main main sidebar'
  'footer footer footer';
1
2
3
4

Im obigen Code ist die Oberseite der Kopfbereichheader, der untere Bereich ist der Fußzeilenbereichfooter, der Mittelteil istmainUndsidebar。

Wenn einige Bereiche nicht genutzt werden müssen, verwenden Sie „Punkte“ (.)äußern.

grid-template-areas:
  'a . c'
  'd . f'
  'g . i';
1
2
3
4

Im obigen Code ist die mittlere Spalte ein Punkt, was bedeutet, dass die Zelle nicht verwendet wird oder zu keinem Bereich gehört.

Beachten Sie, dass die Benennung der Regionen Auswirkungen auf die Rasterlinien hat.Die Startgitterlinie jedes Bereichs wird automatisch benannt区域名-start, wird die abgeschlossene Gitterlinie automatisch benannt区域名-end。

Beispielsweise wird der Bereich benanntheader, dann werden die horizontalen Gitterlinien und die vertikalen Gitterlinien an der Startposition aufgerufenheader-start, werden die horizontalen Gitterlinien und die vertikalen Gitterlinien an der Endposition aufgerufenheader-end。

3.5 Grid-Auto-Flow-Attribut

Nachdem das Raster geteilt wurde, werden die untergeordneten Elemente des Containers automatisch der Reihe nach in jedem Raster platziert. Die standardmäßige Platzierungsreihenfolge ist „Zeile zuerst, Spalte zweitens“, das heißt, zuerst wird die erste Zeile gefüllt und dann mit der Platzierung der zweiten Zeile begonnen, was der Reihenfolge der Zahlen in der folgenden Abbildung entspricht.

Dieser Auftrag wird erteilt vongrid-auto-flowDer durch das Attribut bestimmte Standardwert istrow , also „erst Reihe, dann Reihe“.Sie können es auch auf einstellencolumn, wird zu „Zeile zuerst, dann Zeile“.

grid-auto-flow: column;
1

obiger Codebereits eingerichtetcolumnVon nun an sieht die Platzierungsreihenfolge wie unten dargestellt aus.

grid-auto-flowZusätzlich zum Festlegen des Attributs aufrowUndcolumn, kann auch auf eingestellt werdenrow denseUndcolumn dense . Diese beiden Werte werden hauptsächlich verwendet, um die verbleibenden Elemente automatisch zu platzieren, nachdem bestimmten Elementen Positionen zugewiesen wurden.

Beispiel untenLassen Sie Projekt Nr. 1 und Projekt Nr. 2 jeweils zwei Zellen belegen, und dann in der Standardeinstellunggrid-auto-flow: rowIn diesem Fall wird das folgende Layout erstellt.

Im Bild oben ist die Position hinter Element Nr. 1 leer. Dies liegt daran, dass Element Nr. 3 standardmäßig auf Element Nr. 2 folgt und daher hinter Element Nr. 2 eingestuft wird.

Ändern Sie nun die Einstellungen und stellen Sie sie auf einrow dense, bedeutet „Zeile zuerst, Spalte dann“ und füllen Sie es so dicht wie möglich ohne Leerzeichen aus.

grid-auto-flow: row dense;
1

obiger CodeDer Effekt ist wie folgt.

Das Bild oben füllt zuerst die erste Zeile und dann die zweite Zeile, sodass Element 3 auf Element 1 folgt. Die Artikel Nr. 8 und Nr. 9 werden in der vierten Reihe platziert.

Wenn Sie die Einstellung ändern aufcolumn dense, bedeutet „zuerst Spalte, dann Zeile“ und füllen Sie die Leerzeichen so weit wie möglich aus.

grid-auto-flow: column dense;
1

obiger CodeDer Effekt ist wie folgt.

Das obige Bild füllt zuerst die erste Spalte und dann die zweite Spalte, sodass sich Element Nr. 3 in der ersten Spalte und Element Nr. 4 in der zweiten Spalte befindet. Die Punkte 8 und 9 wurden in die vierte Spalte gequetscht.

3.6 justify-items-Attribut, align-items-Attribut, place-items-Attribut

justify-itemsEigenschaft legt die horizontale Position des Zellinhalts fest (links, zentriert, rechts),align-itemsDie Eigenschaft legt die vertikale Position (oben, in der Mitte, unten) des Zellinhalts fest.

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
1
2
3
4

Diese beiden Attribute werden genau gleich geschrieben und können die folgenden Werte annehmen.

• Start: Richten Sie die Startkante der Zelle aus.
• Ende: An der Endkante der Zelle ausrichten.
• Mitte: Mitte innerhalb der Zelle.
• Strecken: Strecken, um die gesamte Breite der Zelle auszufüllen (Standardwert).

.container {
  justify-items: start;
}
1
2
3

obiger CodeZeigt an, dass der Inhalt der Zelle nach links ausgerichtet ist. Der Effekt ist wie unten dargestellt.

.container {
  align-items: start;
}
1
2
3

obiger CodeZeigt an, dass der Inhalt der Zelle am Kopf ausgerichtet ist. Der Effekt ist wie unten gezeigt.

place-itemsDie Eigenschaften sindalign-itemsAttribute undjustify-itemsDie kombinierte Kurzform der Eigenschaft.

place-items: <align-items> <justify-items>;
1

Unten finden Sie ein Beispiel.

place-items: start end;
1

Wenn der zweite Wert weggelassen wird, betrachtet der Browser ihn als gleich dem ersten Wert.

3.7 Justify-Content-Attribut, Align-Content-Attribut, Place-Content-Attribut

justify-contentDas Attribut ist die horizontale Position des gesamten Inhaltsbereichs innerhalb des Containers (links, mittig, rechts).align-contentDas Attribut ist die vertikale Position des gesamten Inhaltsbereichs (oben, mitte, unten).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
1
2
3
4

Diese beiden Attribute werden genau gleich geschrieben und können die folgenden Werte annehmen. (Die Bilder unten basieren alle aufjustify-contentZum Beispiel Eigenschaftenalign-content Das Attributdiagramm ist genau das gleiche, außer dass die horizontale Ausrichtung in eine vertikale Ausrichtung geändert wurde. )

• start – der Startrand des ausgerichteten Containers.
  
• end – richtet den Endrand des Containers aus.
  
• center – Zentrieren Sie den Behälter im Inneren.
  
• stretch – Wenn die Elementgröße nicht angegeben ist, wird gedehnt, um den gesamten Rastercontainer auszufüllen.
  
• space-around – gleicher Abstand auf beiden Seiten jedes Elements. Daher ist der Abstand zwischen den Gegenständen doppelt so groß wie der Abstand zwischen den Gegenständen und dem Behälterrand.
  
• space-between – Es gibt den gleichen Abstand zwischen den Elementen und keinen Abstand zwischen den Elementen und dem Containerrand.
  
• space-evenly – Der Abstand zwischen den Elementen ist gleich und der Abstand zwischen den Elementen und dem Containerrand ist gleich lang.
  
  place-contentDie Eigenschaften sindalign-contentAttribute undjustify-contentDie kombinierte Kurzform der Eigenschaft.

place-content: <align-content> <justify-content>;
1

Unten finden Sie ein Beispiel.

place-content: space-around space-evenly;
1

Wenn Sie den zweiten Wert weglassen, geht der Browser davon aus, dass der zweite Wert gleich dem ersten Wert ist.

3.8 Grid-Auto-Columns-Eigenschaft, Grid-Auto-Rows-Eigenschaft

Manchmal werden einigen Elementen Positionen außerhalb des vorhandenen Rasters zugewiesen. Das Raster hat beispielsweise nur 3 Spalten, aber in der 5. Zeile ist ein bestimmtes Element angegeben. Zu diesem Zeitpunkt generiert der Browser automatisch zusätzliche Raster, um die Platzierung von Elementen zu erleichtern.

grid-auto-columnsAttribute undgrid-auto-rows Eigenschaften werden verwendet, um die Spaltenbreite und Zeilenhöhe des vom Browser automatisch erstellten redundanten Rasters festzulegen.Sie sind auf die gleiche Weise geschrieben wiegrid-template-columnsUndgrid-template-rows Genauso. Wenn diese beiden Eigenschaften nicht angegeben sind, bestimmt der Browser die Spaltenbreite und Zeilenhöhe des neuen Rasters vollständig anhand der Größe des Zelleninhalts.

Beispiel untenIm Inneren besteht das unterteilte Raster aus 3 Zeilen x 3 Spalten, wobei Element Nr. 8 in der 4. Zeile und Element Nr. 9 in der 5. Zeile angegeben ist.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

Der obige Code gibt an, dass die neue Zeilenhöhe einheitlich 50 Pixel beträgt (die ursprüngliche Zeilenhöhe beträgt 100 Pixel).

3.9 Grid-Template-Attribut, Grid-Attribut

grid-templateDie Eigenschaften sindgrid-template-columns、grid-template-rowsUndgrid-template-areasDie kombinierte Kurzform dieser drei Eigenschaften.

gridDie Eigenschaften sindgrid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flowDie kombinierte Abkürzung dieser sechs Eigenschaften.

Aus Sicht der Lese- und Schreibfreundlichkeit wird empfohlen, Attribute nicht zusammenzuführen, daher werden diese beiden Attribute hier nicht im Detail vorgestellt.

4. Projektattribute

Die folgenden Eigenschaften sind im Projekt definiert.

4.1 Grid-Column-Start-Eigenschaft, Grid-Column-End-Eigenschaft, Grid-Row-Start-Eigenschaft, Grid-Row-End-Eigenschaft

Die Position des Projekts kann angegeben werden. Die spezifische Methode besteht darin, die vier Ränder des Projekts anzugeben und welche Rasterlinien jeweils positioniert werden.

• grid-column-startEigenschaften: Vertikale Gitterlinien dort, wo sich der linke Rand befindet
• grid-column-endEigenschaft: Die vertikale Gitterlinie, an der sich der rechte Rand befindet
• grid-row-startEigenschaften: Die horizontale Gitterlinie, an der sich der obere Rand befindet
• grid-row-endEigenschaften: Die horizontale Gitterlinie, an der sich der untere Rand befindet

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}
1
2
3
4

obiger CodeGibt an, dass der linke Rand von Element 1 die zweite vertikale Rasterlinie und der rechte Rand die vierte vertikale Rasterlinie ist.

Im Bild oben sind nur der linke und rechte Rand von Element Nr. 1 angegeben, der obere und untere Rand jedoch nicht. Daher wird die Standardposition verwendet, d. h. der obere Rand ist die erste horizontale Rasterlinie. und der untere Rand ist die zweite horizontale Gitterlinie.

Mit Ausnahme von Element Nr. 1 haben andere Elemente keine festgelegten Positionen und werden automatisch vom Browser angeordnet. Zu diesem Zeitpunkt werden ihre Positionen durch die des Containers bestimmtgrid-auto-flowDer Standardwert dieses Attributs wird durch das Attribut bestimmtrow , sodass sie „zuerst Zeile, dann Spalte“ angeordnet werden.Leser können den Wert dieses Attributs in änderncolumn、row denseUndcolumn dense, um zu sehen, wie sich die Positionen anderer Elemente geändert haben.

Beispiel untenDies ist der Effekt der Angabe der Positionen von vier Grenzen.

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}
1
2
3
4
5
6

Die Werte dieser vier Attribute können nicht nur als Gitterliniennummer, sondern auch als Name der Gitterlinie angegeben werden.

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
1
2
3
4

Im obigen Code werden die Positionen des linken und rechten Rands als Namen der Gitterlinien angegeben.

Die Werte dieser vier Attribute können ebenfalls verwendet werdenspanSchlüsselwort, das „span“ angibt, d. h. wie viele Gitter sich zwischen dem linken und dem rechten Rand (oberer und unterer Rand) erstrecken.

.item-1 {
  grid-column-start: span 2;
}
1
2
3

obiger CodeZeigt an, dass sich der linke Rand von Element Nr. 1 vom rechten Rand aus über 2 Raster erstreckt.

Dies hängt mit zusammenCode untenDer Effekt ist genau derselbe.

.item-1 {
  grid-column-end: span 2;
}
1
2
3

Verwenden Sie diese vier Attribute, wenn es eine Überschneidung von Elementen gibtz-indexDie Eigenschaft gibt die überlappende Reihenfolge der Elemente an.

4.2 Grid-Spalten-Attribut, Grid-Zeilen-Attribut

grid-columnDie Eigenschaften sindgrid-column-startUndgrid-column-endDie kombinierte Abkürzungsform vongrid-rowDie Eigenschaften sindgrid-row-startAttribute undgrid-row-endDie abgekürzte Form der Fusion.

.item {
  grid-column: <start-line/ <end-line>;
  grid-row: <start-line/ <end-line>;
}
1
2
3
4

Unten finden Sie ein Beispiel.

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
1
2
3
4
5
6
7
8
9
10
11

Im obigen Code das Projektitem-1Belegen Sie die erste Zeile, von der ersten Spaltenzeile bis zur dritten Spaltenzeile.

Unter diesen beiden Attributen können Sie auch verwendenspanSchlüsselwort, das angibt, wie viele Raster überspannt werden sollen.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
1
2
3
4
5
6
7
8
9
10
11

obiger Codein, Projektitem-1Der belegte Bereich umfasst die erste Reihe + zweite Reihe und die erste Spalte + zweite Spalte.

Der Schrägstrich und die folgenden Teile können weggelassen werden und erstrecken sich standardmäßig über ein Raster.

.item-1 {
  grid-column: 1;
  grid-row: 1;
}
1
2
3
4

Im obigen Code das Projektitem-1Besetzen Sie das erste Raster in der oberen linken Ecke.

4.3 Grid-Area-Attribut

grid-areaDas Attribut gibt den Bereich an, in dem das Element platziert wird.

.item-1 {
  grid-area: e;
}
1
2
3

obiger CodeIn befindet sich Projekt Nr. 1eBereich, der Effekt ist wie unten gezeigt.

grid-areaEigenschaften können auch als verwendet werdengrid-row-start、grid-column-start、grid-row-end、grid-column-endDie zusammengeführte Abkürzungsform gibt direkt den Standort des Projekts an.

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
1
2
3

Unten ist einBeispiel。

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}
1
2
3

4.4 justify-self-Attribut, align-self-Attribut, place-self-Attribut

justify-selfDie Eigenschaft legt die horizontale Position (links, Mitte, rechts) des Zellinhalts fest, gefolgt vonjustify-itemsDie Eigenschaften werden genau gleich verwendet, gelten jedoch nur für ein einzelnes Element.

align-selfDie Eigenschaft legt die vertikale Position (oben, in der Mitte, unten) des Zellinhalts fest, gefolgt vonalign-itemsDie Verwendung von Attributen ist genau gleich und betrifft nur ein einzelnes Projekt.

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
1
2
3
4

Beide Eigenschaften können die folgenden vier Werte annehmen.

• Start: Richten Sie die Startkante der Zelle aus.
• Ende: An der Endkante der Zelle ausrichten.
• Mitte: Mitte innerhalb der Zelle.
• Strecken: Strecken, um die gesamte Breite der Zelle auszufüllen (Standardwert).

Drunter istjustify-self: startBeispiel von.

.item-1 {
  justify-self: start;
}
1
2
3

place-selfDie Eigenschaften sindalign-selfAttribute undjustify-selfDie kombinierte Kurzform der Eigenschaft.

place-self: <align-self> <justify-self>;
1

Unten finden Sie ein Beispiel.

place-self: center center;
1

Wenn der zweite Wert weggelassen wird,place-selfDie Immobilie betrachtet die beiden Werte als gleich.