Grid-Spalten | CSS-Tricks

CSS Almanac → Eigenschaften → G → grid-column

Mojtaba Seyedi am 18. Okt. 2022

Die CSS-Eigenschaft grid-column ist eine Kurzschreibweise, die in einer Deklaration die Spaltengitterlinien angibt, an denen ein Gitterelement in einem Gitterlayout beginnt und endet.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-item:nth-child(2) {
  grid-column: 3 / 5; /* Starts on the third column line and ends on the fifth column line */
}

Aufgrund des standardmäßigen automatischen Platzierungsverhaltens von CSS Grid würde das zweite Kindelement des Gitters in diesem Beispiel normalerweise in der zweiten Spalte der ersten Zeile des Gitters platziert werden. Da wir jedoch grid-column deklariert und es so eingestellt haben, dass die Anfangskante des Gitterelements mit der dritten Gitterlinie und seine Endkante mit der fünften Gitterlinie ausgerichtet wird, überspannt das Element stattdessen die dritte und vierte Spalte anstelle einer einzelnen Spalte.

Festlegen der Position und Größe des zweiten Gitterelements mit der CSS Grid-Eigenschaft `grid-column`.

Bestandteileigenschaften

Wie bereits erwähnt, ist die Eigenschaft grid-column eine Kurzschreibweise, die zwei Eigenschaften kombiniert.

Almanac am 4. Okt. 2022

grid-column-start

.element { grid-column-start: 3; }

Mojtaba Seyedi

Almanac am 4. Okt. 2022

grid-column-end

.element { grid-column-end: 4; }

Mojtaba Seyedi

Syntax

grid-column: <grid-line> [ / <grid-line> ]?

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 zwei durch einen Schrägstrich (/) getrennte Werte annehmen. Der Wert vor dem Schrägstrich setzt die Eigenschaft grid-column-start, während der Wert nach dem Schrägstrich die Eigenschaft grid-column-end setzt. Sie können einen einzelnen Wert ohne Schrägstrich deklarieren, der für die Eigenschaft grid-column-start gilt und die Eigenschaft grid-column-end auf auto setzt.

Werte

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

/* <custom-ident> value */
grid-column: myLineName;
grid-column: myGridArea;
grid-column: sidebar-start / main-end;

/* <integer> + <custom-ident> values */
grid-column: 3;
grid-column: 2 / -3;
grid-column: main 2;
grid-column: 3 line / 5 line;

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

/* Global values */
grid-column: inherit;
grid-column: initial; /* same as `auto` */
grid-column: revert;
grid-column: revert-layer;
grid-column: 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 Gitterlinie zu verweisen, oder einen String, um auf eine benannte Gitterlinie oder einen benannten Gitterbereich zu verweisen. Mit anderen Worten, Sie können eine Gitterlinie durch ihren numerischen Index oder ihren Namen an der Start- und Endkante eines Gitterelements angeben.

Positionierung von Elementen anhand von Liniennummern

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

A two row grid with four columns. The last two columns in the second row are empty. — Nur die Indizes der Spaltengittertracks werden angezeigt.

Im ersten Beispiel dieses Artikels haben wir diese Syntax verwendet, um uns mit ihrem Index (3) auf die dritte Gitterlinie zu beziehen, die die Anfangskante des Gitterelements mit der Anfangskante der dritten Spalte ausrichtet, während ihre Endkante mit der fünften Spalte unter Verwendung der <custom-ident>-Syntax ausgerichtet wird.

.grid-item:nth-child(2) {
  grid-column: 3 / 5;
}

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: -3 / -1; /* same as: grid-column: 3 / 5; */
}

Beachten Sie, dass den Spalten unseres Gitters negative und positive ganze Zahlen zugewiesen wurden.

Platzieren des zweiten Gitterelements in der dritten und vierten Spalte mit der CSS-Eigenschaft `grid-column`.

Positionierung von Elementen anhand von Liniennamen

Sie können einer Gitterlinie einen benutzerdefinierten Namen mit den Gitterplatzierungseigenschaften grid-template-columns und grid-template-rows zuweisen, um diese Linie anhand ihres Namens zu referenzieren.

Gehen wir zurück zu unserem Beispiel und benennen alle Spaltentracklinien wie in der folgenden Deklaration.

.grid {
  display: grid;
  grid-template-columns: [first] 1fr [second] 1fr [third] 1fr [fourth] 1fr [last];  
}

Wir können uns mit unseren benutzerdefinierten Namen statt mit ihrem Index auf die dritte und fünfte Linie beziehen.

.grid-item:nth-child(2) {
  grid-column: third / last; /* same as index numbers 3 / 5 */
}

Beachten Sie, dass <custom-ident> den Wert span nicht annehmen kann. span ist ein reserviertes Schlüsselwort für Gitterplatzierungseigenschaften (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-column: content-start / 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-column: content;
}

Hier ist ein vollständiges Beispiel.

<body>
  <main></main>
  <aside></aside>
</body>

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   
  grid-template-areas: "content content sidebar";
}

main {
  grid-column: content;
}

Dies legt die Position des <main>-Elements in unserem Gitter auf den Bereich content fest.

Single row grid with two columns. — Platzieren des Haupt-Elements in den Bereich "content" anhand seines Namens mit der CSS-Eigenschaft `grid-column`.

`<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: [bar] 1fr [foo] 1fr [bar] 300px [bar];

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

Nehmen wir an, Sie möchten die dritte Linie auswählen, aber diese Linie hat denselben Namen wie die erste und die letzte Gitterlinie – alle heißen bar. Da die *zweite* Linie mit dem Namen bar die dritte Gitterlinie ist, können Sie 2 verwenden, um sie als Startpunkt auszuwählen.

.grid-item:nth-child(2) {
  grid-column: 2 bar; /* The second `bar` named line which is the third line */

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

Single row grid with three columns. The second column is empty.

Beachten Sie, dass die Reihenfolge keine Rolle spielt, sodass der vorherige Code auch so geschrieben werden kann:

.grid-item:nth-child(2) {
  grid-column: bar 2;
}

Wie bei der vorherigen Syntax können Sie auch einen negativen ganzzahligen Wert verwenden, um die Gitterlinien vom Ende des Gitters aus zu zählen. In unserem Beispiel, wenn wir uns auf die erste bar beziehen möchten, können wir vom Ende unseres Gitters aus zählen und es so schreiben:

.grid-item:nth-child(2) {
  grid-column: -3 bar;
}

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 der Standardwert 1 ist, wenn die Ganzzahl nirgends in dieser Syntax angegeben ist.

`span <integer>`

Die Verwendung des Schlüsselworts span gefolgt von einer Ganzzahl gibt die Anzahl der Tracks an, über die sich ein Gitterelement von einer bestimmten Gitterlinie erstreckt. Wenn wir beispielsweise möchten, dass sich ein Gitterelement um drei Spaltentracks in Richtung seiner Endkante erstreckt, können wir den folgenden Wert anwenden.

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

A two row grid with 5 columns. The second grid item spands the middle three columns in the first row. — Das Gitterelement überspannt drei Spalten mit der CSS-Eigenschaft `grid-column`.

`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-column: 3 / span lastline;
}

Da die Startlinie des Gitterelements bekannt ist (3), können wir das Element so spannen, bis es eine Gitterlinie namens lastline erreicht.

Two row grid with five columns. The third grid item spans the last three columns in the first row. — Das Gitterelement überspannt das Gitter, bis es die angegebene Gitterlinie namens lastline erreicht, mit der CSS-Eigenschaft `grid-column`.

`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-column: 2 /span x 2;
}

Wir setzen die Startlinie des Gitterelements auf die zweite Linie. Dann wollen wir, dass es sich nach vorne erstreckt, bis es eine Gitterlinie namens x trifft. Und da wir möchten, dass es die zweite x-Gitterlinie ist, erhalten wir 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.

Three row grid with five columns. — Festlegen der Position eines Gitterelements von der zweiten Linie zur zweiten Linie namens `x` unter Verwendung der CSS-Eigenschaft `grid-column`.

Diese Syntax ist hilfreich, wenn Sie ein Gitterelement mit seinem Namen zu einer Gitterlinie hin ausrichten möchten. Aber Vorsicht, wenn mehr als eine Gitterlinie denselben Namen hat, verwenden wir diese Methode und fügen eine Ganzzahl hinzu, um anzugeben, dass wir die N-te dieser Gitterlinie wünschen.

Siehe grid-column-start und grid-column-end für weitere Informationen und Beispiele zur Syntax dieser einzelnen Eigenschaften.

Beispiele

Betrachten wir einige verschiedene Szenarien, in denen grid-column verwendet werden kann.

Full-Bleed-Layout

Manchmal möchten wir, dass unser Text schmaler und zentriert ist, aber ein Element wie ein Bild oder ein Video reicht bis zum Rand des Ansichtsfensters. Diese Art von Layout wird als Full-Bleed-Layout bezeichnet.

Betrachten Sie das folgende HTML.

<article>
  <h1></h1>
  <p></p>
  <img src="bridge.webp" alt="A brightly-lot floating bridge against the night sky.">
  <p></p>
</article>

Um dieses Layout mit CSS Grid zu erstellen, richten wir ein Dreispalten-Gitter ein.

article {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 1fr;
}

Nun müssen wir alle Kinder des <article> in die zweite Spalte platzieren und die Startkante des <img> mit der ersten Gitterlinie und ihre Endkante mit der letzten Linie ausrichten.

article > * {
  grid-column: 2 / 3;
}
article > img {
  grid-column: 1 / -1;
}

Das Ergebnis sehen Sie im folgenden Bild.

Show the grid lines of an article layout that contains an image that spans edge to edge. — Verwendung der CSS-Eigenschaft `grid-column`. Das Bildelement wird so eingestellt, dass es sich über alle Gitterspalten erstreckt, während sich andere Elemente in der zweiten Spalte befinden.

Der vollständige Ausschnitt für ein Full-Bleed-Layout lautet wie folgt:

.content {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 1fr;
}
.content > * {
  grid-column: 2 / 3;
}
.full-bleed {
  grid-column: 1 / -1;
}

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-column: 1 / -1;
  grid-row: 1 / -1;
}

Hier ist, was wir bekommen

Cabin in the woods with a green to blue gradient overlay and the words the caption of our image on top.

Standardmäßig werden Gitterelemente in der Quellreihenfolge gestapelt, 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-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 1;
}

Four overlapping grid items in a five-by-five grid. — Das zweite Gitterelement mit der CSS-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.