CSS Almanac → Properties → G → grid-area

grid-area

Avatar of Mojtaba Seyedi
Mojtaba Seyedi am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Die CSS-Eigenschaft grid-area ist eine Kurzschreibweise, die den Ort und die Größe eines Grid-Elements in einem Grid-Layout festlegt, indem sie den Wert von grid-row-start, grid-column-start, grid-row-end und grid-column-end in einer Deklaration festlegt.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-item:nth-child(2) {
  grid-area: 2 / 4 / 4 / 6;

  /* is equivalent to: */
  grid-row-start: 2;
  grid-column-start: 4;
  grid-row-end: 4;
  grid-column-end: 6;
}

Aufgrund des Standard-Verhaltens der automatischen Platzierung von CSS Grid würde das zweite Grid-Element in diesem Beispiel normalerweise in der zweiten Spalte der ersten Zeile des Grids platziert werden. Da wir jedoch grid-area deklariert und so eingestellt haben, dass die Start- und Endkanten des Grid-Elements mit unseren gewünschten Grid-Linien übereinstimmen, verschob sich das Element in die zweite Zeile und vierte Spalte und erstreckte sich über zwei Spuren in beide Richtungen, um die korrekten End-Grid-Linien zu erreichen.

Festlegen des Ortes und der Größe des zweiten Grid-Elements mit der CSS-Eigenschaft grid-area.

Bestandteileigenschaften

Wie bereits erwähnt, ist die Eigenschaft grid-area eine Kurzschreibweise, die vier Eigenschaften kombiniert

Syntax

grid-area: <grid-line> [ / <grid-line> ]{0,3}
Vollständige Definition 
<grid-line> =
  auto |
  <custom-ident> |
  [ [ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>? ] |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

  • Anfangswert: auto
  • Gilt für: Gitterelemente und absolut positionierte Boxen, deren enthaltender Block ein Gittercontainer ist.
  • Vererbt: nein
  • Berechneter Wert: wie für seine Longhand-Eigenschaften angegeben.
  • Animationstyp: diskret

Diese Eigenschaft kann bis zu vier durch einen Schrägstrich (/) getrennte Werte annehmen.

Vier Werte

Wenn vier <grid-line>-Werte angegeben sind

  • Der erste Wert setzt die Eigenschaft grid-row-start.
  • Der zweite Wert setzt die Eigenschaft grid-column-start.
  • Der dritte Wert setzt die Eigenschaft grid-row-end.
  • Der vierte Wert setzt die Eigenschaft grid-column-end.
.grid-item {
  grid-area: 2 / 4 / 3 / 6;

  /* is equivalent to: */
  grid-row-start: 2;
  grid-column-start: 4;
  grid-row-end: 3;
  grid-column-end: 6;
}

Drei Werte

Wenn drei Werte angegeben sind – grid-column-end wird weggelassen. Wenn grid-column-start ein <custom-ident> ist, wird grid-column-end auf diesen <custom-ident> gesetzt; andernfalls wird es auf auto gesetzt.

  • Der erste Wert setzt die Eigenschaft grid-row-start.
  • Der zweite Wert setzt die Eigenschaft grid-column-start.
    • Es setzt auch die Eigenschaft grid-column-end, wenn der Wert ein <custom-ident> ist.
    • Andernfalls wird grid-column-end auf auto gesetzt.
  • Der dritte Wert setzt die Eigenschaft grid-row-end.
/* <custom-ident> */
.grid-item {
  grid-area: 2 / area / 4;
  
  /* is equivalent to */
  grid-row-start: 2;
  grid-column-start: area;
  grid-row-end: 4;
  grid-column-end: area;
}

/* <grid-line> */
.grid-item {
  grid-area: 2 / 4 / 3;

  /* is equivalent to: */
  grid-row-start: 2;
  grid-column-start: 4;
  grid-row-end: 3;
  grid-column-end: auto;
}

Zwei Werte

Wenn zwei Werte angegeben sind, werden grid-row-end und grid-column-end weggelassen. Wenn die Werte für grid-row-start und grid-column-start ein <custom-ident> sind, werden grid-row-end und grid-column-end auf diesen <custom-ident> gesetzt; andernfalls werden sie auf auto gesetzt.

  • Der erste Wert setzt die Eigenschaft grid-row-start.
    • Es setzt auch die Eigenschaft grid-row-end, wenn der Wert ein <custom-ident> ist.
    • Andernfalls wird grid-row-end auf auto gesetzt.
  • Der zweite Wert setzt die Eigenschaft grid-column-start.
    • Es setzt auch die Eigenschaft grid-column-end, wenn der Wert ein <custom-ident> ist.
    • Andernfalls wird grid-column-end auf auto gesetzt.
/* <custom-ident> */
.grid-item {
  grid-area: area / 4;
  
  /* is equivalent to */
  grid-row-start: area;
  grid-column-start: 4;
  grid-row-end: area;
  grid-column-end: auto;
}

/* another <custom-ident> example */
.grid-item {
  grid-area: area / another-area;
  
  /* is equivalent to */
  grid-row-start: area;
  grid-column-start: another-area;
  grid-row-end: area;
  grid-column-end: another-area;
}

/* <grid-line> */
.grid-item {
  grid-area: 2 / 4;

  /* is equivalent to */
  grid-row-start: 2;
  grid-column-start: 4;
  grid-row-end: auto;
  grid-column-end: auto;
}

Einzelner Wert

Wenn ein Wert angegeben ist, werden, wenn grid-row-start ein <custom-ident> ist, alle vier Teil-Eigenschaften auf diesen Wert gesetzt. Andernfalls werden sie auf auto gesetzt.

/* <custom-ident> */
.grid-item {
  grid-area: area;
  
  /* is equivalent to */
  grid-row-start: area;
  grid-column-start: area;
  grid-row-end: area;
  grid-column-end: area;
}

/* <grid-line> */
.grid-item {
  grid-area: 2;

  /* is equivalent to */
  grid-row-start: 2;
  grid-column-start: auto;
  grid-row-end: auto;
  grid-column-end: auto;
}

Die Syntax verstehen

Die verschiedenen Szenarien, die auf der Anzahl der Werte basieren – ganz zu schweigen von den Fällen mit <custom-ident> – mögen auf den ersten Blick kompliziert und seltsam erscheinen. Aber wenn man ein wenig darüber nachdenkt, ergibt alles Sinn.

Nehmen wir als Beispiel das folgende Grid-Element

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

Hier wird grid-column-end weggelassen (da dies eine Syntax mit drei Werten ist) und grid-column-start auf 4 gesetzt. Die Eigenschaft grid-column-end kann nicht auch 4 sein, da die Start- und Endkante des Grid-Elements auf dieselbe Linie zeigen würden. Der Browser richtet die Startkante nicht an 4 aus und dehnt das Grid-Element um eine Spalte, wie es das Standardverhalten ist. Deshalb wird, wenn eine Kante keinen Wert hat, auto gesetzt – nur für den Fall, dass ihre andere Kante auf eine Grid-Linie mit einem numerischen Wert zeigt.

Was ist nun, wenn der Wert von grid-column-start stattdessen auf einen Namen gesetzt wird? Zum Beispiel x statt 4

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

Der Wert x kann der Name einer Grid-Linie oder eines Grid-Bereichs sein. Wenn es eine Grid-Linie namens x gibt, wird grid-column-end ebenfalls auf x gesetzt, aber da beide Spaltenkanten des Grid-Elements auf dieselbe Grid-Linie – x – zeigen, ist das Standardverhalten des Browsers wieder so, als ob grid-column-end auf auto gesetzt wäre und das Grid-Element eine Spalte einnimmt.

Wenn es hingegen einen Grid-Bereich namens x gibt, dann wird grid-column-start auf die Startkante dieses Grid-Bereichs und grid-column-end auf dessen Endkante gesetzt.

Es ist viel einfacher, all das zu verstehen, wenn man es im Code sieht

.grid-item {
  grid-area: 2 / x / 3;

  /* is equivalent to */
  grid-row-start: 2;
  grid-column-start: x-start;
  grid-row-end: 3;
  grid-column-end: x-end;
}

Werte

/* Keyword value */
grid-area: auto;

/* <custom-ident> value */
grid-area: my-area;
grid-area: main-start / sidebar-start;
grid-area: main-start / sidebar-start / footer-start / main-end;
grid-area: line1 / line2 / line3 / line4;

/* <integer> + <custom-ident> values */
grid-area: 3;
grid-area: 2 / -3;
grid-area: main 2;
grid-area: 2 a / 4 b / 2 x;

/* span + <integer> + <custom-ident> values */
grid-area: span 3;
grid-area: 1 / 3 / span 2 / 5;
grid-area: 1 / span myline;
grid-area: 2 / span gridline 3;

/* Global values */
grid-area: inherit;
grid-area: initial; /* same as `auto` */
grid-area: revert;
grid-area: revert-layer;
grid-area: unset;

auto

Dies ist der Standardwert. Er gibt die standardmäßige Spanne (1) und das automatische Platzierungsverhalten an, was bedeutet, dass das Gitterelement automatisch in der nächsten freien Gitterzelle platziert wird.

<custom-ident>

Diese Syntax ermöglicht es Ihnen, entweder eine Ganzzahl zu verwenden, um auf eine nummerierte Grid-Linie zu verweisen, oder einen String, um auf eine benannte Grid-Linie oder einen benannten Grid-Bereich zu verweisen. Mit anderen Worten, Sie können eine Grid-Linie anhand ihres numerischen Index oder Namens für die Kanten eines Grid-Elements angeben.

Positionierung von Elementen nach Zeilennummern

Zwischen jedem Gittertrack befinden sich zwei Gitterlinien, denen automatisch eine fortlaufende Nummer ab eins zugewiesen wird.

Demonstration des Index von Zeilen- und Spaltengrid-Spuren.

Im ersten Beispiel dieses Artikels haben wir diese Syntax verwendet, um auf die zweite und vierte Zeilengrid-Linie mit ihrem Index (2 und 4) zu verweisen, um die Start- und Endkante des Grid-Elements mit der Start- und Endkante der zweiten und dritten Zeile auszurichten. Außerdem verweisen wir auf die vierte und sechste Spaltengrid-Linie, um die Start- und Endkanten des Grid-Elements mit den Start- und Endkanten der vierten und fünften Spalte auszurichten.

.grid-item:nth-child(2) {
  grid-area: 2 / 4 / 4 / 6;
}

Beachten Sie, dass Sie auch eine negative Zahl verwenden können, um sich auf eine Gitterlinie zu beziehen, diese zählt jedoch vom Ende des Gitters aus. Der folgende Code verweist auf dieselben Gitterlinien wie im vorherigen Beispiel, zählt aber rückwärts.

.grid-item:nth-child(2) {
  grid-column: -4 / -4 / -2 / -2; /* same as: grid-area: 2 / 4 / 4 / 6; */
}

Beachten Sie, dass den negativen Ganzzahlen unser Grid zugewiesen wurde

Platzierung des zweiten Grid-Elements in der zweiten und dritten Zeile und in der vierten und fünften Spalte mit der CSS-Eigenschaft grid-area.
Positionierung von Elementen anhand von Liniennamen

Sie können einer Grid-Linie einen benutzerdefinierten Namen mithilfe der Grid-Eigenschaften für die linienbasierte Platzierung grid-template-columns und grid-template-rows zuweisen, um auf diese Linie über ihren Namen zu verweisen.

Gehen wir zurück zu unserem Beispiel und benennen die Spalten- und Zeilenrasterlinien wie folgt

.grid {
  display: grid;
  grid-template-rows: 100px [row2] 100px 100px [row4] 100px;
  grid-template-columns: 1fr 1fr 1fr [fourth] 1fr 1fr [second-to-last] 1fr;
}

Wir können uns auf die dritte und die fünfte Linie über unsere benutzerdefinierten Namen – row2, row4, fourth und second-to-last – statt ihrer Indexwerte – 2, 4, 4 und 6 – beziehen.

.grid-item:nth-child(2) {
  grid-area: row2 / fourth / row4 / second-to-last; /* same as index numbers 2 / 4 / 4 / 6 */
}

Beachten Sie, dass <custom-ident> nicht den Wert span annehmen kann. span ist ein reserviertes Schlüsselwort für Grid-Platzierungseigenschaften (z.B. grid-column: 1 / span 2).

Positionierung von Elementen anhand von Gitterbereichen

Beim Definieren von Gitterbereichen mit der Eigenschaft grid-template-areas erhalten Sie kostenlos implizite Liniennamen, die auf dem Namen der Bereiche basieren. Zum Beispiel generiert ein Gitterbereich mit dem Namen content davor eine Linie namens content-start und danach eine namens content-end. Sie können diese Linien referenzieren, um die Position eines Gitterelements festzulegen.

.grid-item:nth-child(2) {
  grid-area: content-start / content-start / content-end / content-end;
}

Alternativ können Sie sich auf den Namen des Bereichs beziehen, um ein Element an der Start- und Endlinie des benannten Bereichs content zu positionieren.

.grid-item:nth-child(2) {
  grid-area: content;
}

Hier ist ein vollständiges Beispiel.

<body>
  <header></header>
  <main></main>
  <aside></aside>
  <footer></footer>
</body>
body {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas:
    "header header header"
    "content content sidebar"
    "footer footer footer";
}

header {
  grid-area: header;
}

main {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

Dies legt die Position der Grid-Elemente fest, wo wir sie in unserem Grid haben wollen.

Platzierung der Grid-Elemente in Grid-Bereichen anhand ihrer Namen mit der CSS-Eigenschaft grid-area.

<integer> && <custom-ident>?

Diese Syntaxvariante ermöglicht es Ihnen, Gitterelemente anhand von Gitterlinien zu positionieren, wenn es wiederholte Namen gibt. Wenn Gitterlinien denselben Namen haben, hilft diese Syntax dabei, anzugeben, auf welche dieser Linien Sie sich beziehen.

.grid {
  display: grid;
  grid-template-columns: [a] 1fr [b] 1fr [b] 1fr [b] 1fr [b];
  grid-template-rows: [x] 1fr [y] 1fr [y] 1fr [y] 1fr [y];

  /*
    Using repeat() function also gives you repeated named grid line, for example:
    grid-template-columns: repeat(3, [b] 1fr);
  */
}

Nehmen wir an, Sie möchten die dritte Linie unter den Zeilenrastern auswählen, aber diese Linie hat denselben Namen wie die zweite, vierte und letzte Grid-Linie – alle heißen y. Da die *zweite* Linie namens y die *dritte* Grid-Linie ist, können Sie 2 verwenden, um sie als Ausgangspunkt auszuwählen. Die gleiche Zählweise gilt für die anderen Werte von grid-area im folgenden Beispiel

.grid-item:nth-child(2) {
  grid-area: 2 y / 3 b / 4 y / 4 b;

  /* This is equivalent to: */
  grid-row-start: 2 y;
  grid-column-start: 3 b;
  grid-row-end: 4 y;
  grid-column-end: 4 b;
}

Beachten Sie, dass die Reihenfolge der Werte keine Rolle spielt. Wir hätten den vorherigen Code auch so schreiben können

.grid-item:nth-child(2) {
  grid-area: y 2 / b 3 / y 4 / b 4;
}

Ähnlich wie bei der vorherigen Syntax können Sie eine negative Ganzzahl verwenden, um die Grid-Linien vom Ende des Grids aus zu zählen. In unserem Beispiel, wenn wir auf dieselben Linien verweisen möchten, können wir vom Ende unseres Grids aus zählen und es so schreiben

.grid-item:nth-child(2) {
  grid-area: -3 y / -2 b / -1 y / -1 b;
}

Beachten Sie, dass der ganzzahlige Wert nicht null sein kann.

span && [ <integer> || <custom-ident> ]

Diese Syntax ermöglicht es einem Gitterelement, sich über Gittertracks zu erstrecken. Dies kann auf drei verschiedene Arten angegeben werden.

Beachten Sie, dass, wenn die Ganzzahl in dieser Syntax nirgends angegeben ist – der Standardwert 1 ist.

span <integer>

Die Verwendung des Schlüsselworts span gefolgt von einer Ganzzahl gibt an, wie viele Spuren ein Grid-Element von einer bestimmten Grid-Linie aus einnimmt. Wenn wir beispielsweise möchten, dass ein Grid-Element drei Zeilen- und zwei Spalten-Spuren in Richtung seiner Startkante einnimmt, können wir den folgenden Wert anwenden

.grid-item:nth-child(2) {
  grid-area: span 3 / span 2;

  /* This is equivalent to */
  grid-row-start: span 3;
  grid-column-start: span 2;
  grid-row-end: auto;
  grid-column-end: auto;
}
Das Grid-Element nimmt zwei Spalten und drei Zeilen ein, unter Verwendung der CSS-Eigenschaft grid-area.
span <custom-ident>

Es ist auch möglich, das Schlüsselwort span mit dem Namen einer Gitterlinie zu kombinieren, damit sich das Gitterelement bis zu dieser angegebenen Gitterlinie erstreckt.

.grid-item:nth-child(3) {
  grid-area: auto / 3 / auto / span lastline;
}

Da die Startlinie des Grid-Elements bekannt ist (3), können wir das Element erweitern, bis es eine Spaltengrid-Linie namens lastline erreicht.

Das Grid-Element erstreckt sich über das Grid, bis es die angegebene Grid-Linie namens lastline erreicht, unter Verwendung der CSS-Eigenschaft grid-area.
span <custom-ident> <integer>

Wenn der angegebene Gitterlinienname mehr als einer Gitterlinie zugewiesen ist – mit anderen Worten, wenn wir wiederholte benannte Gitterlinien haben – müssen wir angeben, welche wir ansprechen möchten. Dazu können wir unserer Wert eine Ganzzahl hinzufügen, die angibt, auf welche Gitterlinie wir uns beziehen.

Nehmen wir das folgende Gitter als Beispiel.

.grid-container {
  display: grid;
  grid-template-columns: [y] 1fr [x] 1fr [x] 1fr [y] 1fr [x] 1fr [x];
}

.grid-item:nth-child(3) {
  grid-area: 2 / 2 / 4 / span x 2;
}

Wir setzen die Startlinie des Grid-Elements auf die zweite Spaltenlinie. Dann wollen wir, dass es sich vorwärts ausdehnt, bis es eine Grid-Linie namens x erreicht. Und da wir möchten, dass es die zweite x-Grid-Linie ist, enden wir mit span x 2.

Als Ergebnis überspannt unser Gitterelement die zweite Linie, wie unten dargestellt. Die erste Linie, die es trifft, ist die erste x, gefolgt von y und schließlich trifft es die gewünschte zweite Linie, genannt x.

Festlegen der Position eines Grid-Elements von der zweiten Spaltenlinie zur zweiten benannten x-Linie unter Verwendung der Eigenschaft grid-area.

Diese Syntax ist hilfreich, wenn Sie ein Grid-Element zu einer Grid-Linie unter Verwendung ihres Namens ausdehnen möchten. Aber Vorsicht, wenn es mehr als eine Grid-Linie mit demselben Namen gibt, verwenden Sie diese Methode, und wir fügen eine Ganzzahl hinzu, um anzugeben, dass wir die N-te dieser Grid-Linie wollen.

Siehe grid-row-start, grid-row-end, grid-column-start und grid-column-end für weitere Informationen und Beispiele zur Syntax für jede Teil-Eigenschaft.

Beispiele

Werfen wir einen Blick auf ein paar Beispiele, um zu demonstrieren, wie grid-area verwendet wird, um Elemente auf einem Raster zu platzieren.

Erstellen eines mehrschichtigen Banners

Nehmen wir an, diese Grafik wird Ihnen von Ihrem Designteam überreicht

Three overlapping images with a blockquote positioned in the bottom-right corner.

Sie stellen auch eine weitere Version zur Verfügung, um Ihnen zu zeigen, dass sie auf einem Raster entworfen wurde

Showing teh grid lines for a design as an overlay.

Richten wir zunächst unser HTML ein

<figure>
  <img class="back" src="back.jpg" alt="Please">
  <img class="middle" src="middle.jpg" alt="fill your alt">
  <img class="front" src="front.jpg" alt="properly">
  <figcaption>Freedom is the oxygen of the soul...</figcaption>
</figure>

Im Design gibt es vierzehn Spalten und neun Zeilen. Das können wir so schreiben

figure {
  display: grid;
  grid-template-columns: repeat(14, 50px);
  grid-template-rows: repeat(9, 50px);
}

Wir müssen all diese untergeordneten <img>-Elemente in ihre richtigen Grid-Bereiche platzieren. Und dafür verwenden wir die Eigenschaft grid-area

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

.middle {
  grid-area: 2 / 1 / 7 / 9;
}

.front {
  grid-area: 4 / 4 / -1 / -3;
}

figcaption {
  grid-area: -3 / -4 / -1 / -1;
}

Das Ergebnis sehen Sie im folgenden Bild.

Showing a grid layout with an overlay revealing the layout's grid lines.

Schauen Sie sich die Demo an, um weitere Details zu diesem Beispiel zu erfahren

Stapeln von Gitterelementen

Beim Positionieren von Elementen im Gitter können wir sie stapeln oder übereinander legen. Dies gibt uns die Möglichkeit, CSS Grid manchmal als Alternative zur absoluten Positionierung zu verwenden. Zum Beispiel können wir eine Beschriftungsebene über ein Bild legen, ohne die Eigenschaft position zu verwenden, wie unten gezeigt.

<figure>
  <img src="image.png" alt="how dare you leave alt empty?">
  <figcaption>The caption of our image</figcaption>
</figure>
figure {
  display: grid;
}

img,
figcaption {
  grid-area: 1 / 1 / -1 / -1;
}

Hier ist, was wir bekommen

Standardmäßig stapeln sich Grid-Elemente in der Quellreihenfolge, aber Sie können ihre Ebene mit der Eigenschaft z-index steuern. Im folgenden Beispiel überlappen wir einige Elemente und verwenden die Eigenschaft z-index, um das zweite Element auf die höchste Ebene im Stapelkontext zu bringen

.item:nth-child(2) {
  grid-area: 2 / 2 / 4 / 4;
  z-index: 1;
}
Das zweite Grid-Element mit der Eigenschaft z-index an die Spitze des Stapels bringen.

Barrierefreiheit (Accessibility)

Ein wichtiger Hinweis bei der Verwendung der Gitterplatzierungseigenschaften ist das Problem, das durch das Ändern der Reihenfolge der Elemente entsteht. Wenn Sie die Position eines Elements ändern, ändert sich nur die visuelle Reihenfolge der Gitterelemente, und diese Reihenfolge stimmt möglicherweise nicht mit der ursprünglichen Dokumentreihenfolge überein. Dies kann zu einer sehr schlechten Erfahrung für jemanden führen, der mit der Tastatur durch das Dokument tabliert oder einen Screenreader verwendet, der den Inhalt in der gleichen Reihenfolge wie das HTML liest.

Vermeiden Sie es daher, die Reihenfolge von Gitterelementen zu ändern, wenn die HTML-Reihenfolge der Elemente wichtig ist. Zum Beispiel kann dies für eine zufällige Bildergalerie gut sein, aber vielleicht nicht so sehr für Ihre Formulareingaben.

Zum Zeitpunkt der Verfassung dieses Textes gibt es einen Vorschlag, dieses Problem anzugehen, der dieses Problem hoffentlich in Zukunft lösen wird.

Demo

Sie können den Wert der Eigenschaft grid-area in der Demo ändern, um zu sehen, was mit dem dritten Grid-Element passiert

Browser-Unterstützung

Weitere Informationen

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.
Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.

© .