grid-column-end

Die CSS-Eigenschaft grid-column-end ist Teil der CSS Grid Layout-Spezifikation und wird verwendet, um die Spaltengitterlinie anzugeben, an der ein Gitterelement in einem Gitterlayout endet. Diese Eigenschaft – neben anderen linienbasierten Platzierungseigenschaften für Gitter – steuert die Größe eines Gitterelements und seine Position im Gitter.

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

.grid-item:nth-child(2) {
  grid-column-end: 4; /* Item ends on the third column line */
}

Basierend auf dem Standard-Auto-Platzierungsverhalten von CSS Grid wird das zweite Kindelement des Gitters in diesem Beispiel in der zweiten Spalte platziert. Wir haben jedoch eine grid-column-end-Position an der vierten Gitterlinie deklariert, wodurch das Gitterelement in die dritte Spalte verschoben und seine Endkante mit der vierten Gitterlinie ausgerichtet wird.

Syntax

grid-column-end: <grid-line>;

Vollständige Definition

where
<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 angegeben
• Animationstyp: diskret

Werte

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

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

/* <integer> + <custom-ident> values */
grid-column-end: 3;
grid-column-end: -2;
grid-column-end: main-area 2;
grid-column-end: 3 sidebar-start;

/* span + <integer> + <custom-ident> values */
grid-column-end: span 3;
grid-column-end: span main;
grid-column-end: span myarea 5;

/* Global values */
grid-column-end: inherit;
grid-column-end: initial; /* same as `auto` */
grid-column-end: revert;
grid-column-end: revert-layer;
grid-column-end: 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 erlaubt es Ihnen, entweder eine Ganzzahl zu verwenden, um auf eine nummerierte Gitterlinie zu verweisen, oder einen String, um auf eine benannte Gitterlinie oder eine benannte Gitterfläche zu verweisen. Mit anderen Worten, Sie können eine Gitterlinie anhand ihres numerischen Index oder Namens für die Endkante eines Gitterelements festlegen.

Positionierung von Elementen nach Zeilennummern

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

Im ersten Beispiel dieses Artikels haben wir diese Syntax verwendet, um sich mit dem Index (4) auf die vierte Gitterlinie zu beziehen, um die Endkante des Gitterelements mit der Startkante der dritten Spalte mit der <custom-ident>-Syntax auszurichten.

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

Sie können auch eine negative Zahl verwenden, um auf eine Gitterlinie zu verweisen, aber denken Sie daran, dass sie vom Ende des Gitters aus gezählt wird. Der folgende Code verweist auf dieselbe Gitterlinie wie im vorherigen Beispiel, zählt aber rückwärts.

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

Beachten Sie, dass negative Ganzzahlen unserem Gitter zugewiesen sind, ebenso wie positive.

Positionierung von Elementen anhand von Liniennamen

Sie können einer Gitterlinie mit grid-template-columns und grid-template-rows einen benutzerdefinierten Namen zuweisen und linienbasierte Platzierungseigenschaften für Gitter verwenden, um sich mit diesem Namen auf diese Linie zu beziehen.

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 [last];  
}

Wir können uns mit unserem benutzerdefinierten Namen anstelle des Index auf die vierte Linie beziehen.

.grid-item:nth-child(2) {
  grid-column-end: last; /* same as index number 4 */
}

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

Positionierung von Elementen anhand von Gitterbereichen

Beim Definieren von Gitterflächen mit der grid-template-areas-Eigenschaft erhalten Sie kostenlos implizite Liniennamen, die auf dem Namen der Flächen basieren. Zum Beispiel erzeugt eine Gitterfläche mit dem Namen sidebar eine Liniennamen sidebar-start davor und sidebar-end danach. Sie können sich auf diese Linien beziehen, um die Position eines Gitterelements festzulegen.

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

Alternativ können Sie sich auf den Namen der Fläche beziehen, um ein Element am Ende der sidebar-benannten Fläche zu positionieren.

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

Da wir in diesem Beispiel die Eigenschaft grid-column-end verwenden, versteht der Browser, dass wir die Linie sidebar-end der Fläche sidebar meinen; daher wird die Endkante des Gitterelements mit der Endkante der Gitterfläche ausgerichtet.

Hier ist ein vollständiges Beispiel.

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

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

aside {
  grid-column-end: sidebar-end;
}

Dies setzt die Position des aside-Elements in unserer Gitterfläche sidebar.

<integer> && <custom-ident>?

Diese Syntax ermöglicht es Ihnen, Gitterelemente anhand von Gitterlinien zu positionieren, wenn Namen wiederholt vorkommen. Wenn Gitterlinien denselben Namen haben, hilft diese Syntax, 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 vierte Linie auswählen, aber diese Linie hat denselben Namen wie die erste und die dritte Gitterlinie – alle heißen bar. Da die dritte Linie namens bar die vierte Linie ist, können Sie 3 verwenden, um sie als Endpunkt auszuwählen.

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

Beachten Sie, dass die Reihenfolge keine Rolle spielt, sodass wir den vorherigen Code auch so schreiben können.

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

Wie bei der vorherigen Syntax können Sie auch eine negative Ganzzahl 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-end: -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, wenn die Ganzzahl in dieser Syntax nicht angegeben ist, der Standardwert 1 ist.

span <integer>

Die Verwendung des Schlüsselworts span gefolgt von einer Ganzzahl gibt die Anzahl der Spuren an, die ein Gitterelement von einer bestimmten Gitterlinie aus überspannt. Wenn wir beispielsweise möchten, dass sich ein Gitterelement über drei Spaltenspuren bis zu seiner Endkante erstreckt, können wir den folgenden Wert anwenden.

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

span <custom-ident>

Sie können span mit einem Namen einer Gitterlinie kombinieren, damit sich das Gitterelement ausdehnt, bis es diese angegebene Gitterlinie erreicht.

.grid-item:nth-child(3) {
  grid-column-start: 3;
  grid-column-end: span lastline;
}

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

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-start: 2;
  grid-column-end: span x 2;
}

Wir setzen die Startlinie des Gitterelements auf die zweite Linie. Dann möchten wir, dass es sich nach vorne überspannt, bis es eine Gitterlinie namens x erreicht. Und da wir möchten, dass es die zweite x-Gitterlinie ist, landen wir bei grid-column-end: span x 2.

Infolgedessen beginnt unser Gitterelement, sich von der zweiten Linie aus in Richtung der Endlinie zu überspannen, wie unten dargestellt. Die erste Linie, die es trifft, ist das erste x, dann y, und schließlich trifft es die gewünschte zweite Linie namens x.

Diese Syntax ist hilfreich, wenn Sie ein Gitterelement über eine Gitterlinie mit ihrem Namen spannen möchten, aber wissen, dass es mehr als eine Gitterlinie mit diesem Namen gibt. Daher fügen wir eine Ganzzahl hinzu, um anzugeben, dass wir die N dieser Gitterlinie möchten.

Positionierung von Gitterelementen kann implizite Spuren erzeugen

Die Positionierung eines Gitterelements auf eine Gitterlinien-Index oder einen Gitterlinien-Namen, der in einem expliziten Gitter nicht existiert, zwingt das Gitter, implizite Spuren zu erstellen, um diese Position zum Gitter hinzuzufügen.

Lassen Sie uns ein Gitter mit zwei Spalten erstellen und die Position seines Elements auf nicht existierende Linien setzen. Im folgenden Beispiel haben wir nur zwei Spalten und keine unserer Gitterlinien benannt. Es gibt also keine Linie mit einem Index von 5 und keine Linie mit dem Namen test, aber wir setzen diese Werte in unsere Eigenschaften.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 100px;
}

.grid-item {
  gird-column-start: span test;
  grid-column-end: 5;
}

Da wir wissen, dass es implizite Spuren in unserem Gitter gibt und wir möchten, dass sie eine Größe haben, damit wir sie sehen können, fügen wir die Eigenschaft grid-auto-columns unserem Code hinzu.

Jetzt, da wir alles eingerichtet haben, sehen wir, was mit unserem Gitter passiert.

Wir setzen grid-column-end auf 5, aber der letzte Index unseres expliziten Gitters ist 3, und deshalb werden zwei implizite Spuren am Ende des Gitters erstellt, um uns eine Linie mit dem Index 5 zu geben. Auf der anderen Seite setzen wir grid-column-start auf eine Gitterlinie mit dem Namen test. Auch hier, da wir keinen solchen Namen in unserem Gitter haben und wir möchten, dass diese Gitterlinie mit der Startkante unseres Gitterelements ausgerichtet wird, wird eine implizite Spaltenspur auf der Startseite des expliziten Gitters in Inline-Richtung erstellt und ihre Linie ist test.

Das Positionieren von Gitterelementen kann Lücken verursachen.

Wie Sie in den vorherigen Beispielen gesehen haben, kann die linienbasierte Positionierung zu leeren Räumen zwischen Gitterelementen führen.

Wenn diese Lücken in Ihrem Design unerwünscht sind, können wir sie leicht behandeln, indem wir dem Gittercontainer die Eigenschaft grid-auto-flow mit dem Wert dense zuweisen.

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

Hier ist, was wir bekommen

Standardmäßig werden Gitterelemente in der Quellreihenfolge gestapelt, aber wir können ihre Ebene mit der Eigenschaft z-index steuern. Im folgenden Beispiel überlagern wir einige Elemente und verwenden die Eigenschaft z-index, um das zweite Element auf die höchste Ebene zu bringen.

.item:nth-child(2) {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}

Verwendung eines negativen Index für mehr Flexibilität

Es gibt Fälle, in denen Sie ein Element mit voller Breite in Ihrem Gitter haben möchten, was bedeutet, dass es von der ersten Gitterlinie bis zur letzten reicht. In einem Vier-Spalten-Gitter ist der Index der Endlinie beispielsweise 5, sodass Sie den folgenden Code schreiben können, um Ihr Vollbreite-Element zu erhalten.

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

.grid-item.full-width {
  grid-column-start: 1;
  grid-column-end: 5;
}

Das funktioniert perfekt, aber was passiert, wenn sich die Anzahl der Spalten auf sechs erhöht? In diesem Fall müssen wir den Indexwert für die Platzierungseigenschaft aktualisieren.

Die flexible Lösung ist die Verwendung des negativen Index!

.grid-item.full-width {
  grid-column-start: 1;
  grid-column-end: -1;
}

Jetzt, unabhängig von der Anzahl der Spalten, erstreckt sich das Gitterelement mit der Klasse full-width immer über das Gitter.

Gitterlinien-Indizes hängen vom Schreibmodus ab.

Das gesamte Modul des Gitterlayouts basiert auf dem Schreibmodus des Dokuments, daher hängen Gitterlinien auch von der Richtung und dem Schreibmodus ab. In einer Rechts-nach-Links-Sprache wie Persisch und Arabisch ist beispielsweise die erste Gitterlinie mit dem Index 1 die rechteste Linie in einem Gitter.

Berücksichtigen Sie also die Schreibrichtung Ihres Gitters, wenn Sie einen Gitterlinienindex verwenden, um Gitterelemente mit einer Eigenschaft wie grid-column-end zu positionieren.

Benannte Flächen bevorzugen benannte Linien.

Wenn eine benannte Gitterfläche denselben Namen wie eine Liniennamen hat, wird der Platzierungsalgorithmus die Linien der benannten Gitterfläche bevorzugen.

Betrachten Sie das folgende Beispiel

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

Die zweite Gitterlinie heißt y, und die letzten beiden Spalten sind als Fläche mit demselben Namen definiert. Nun weisen wir zur Positionierung des ersten Gitterelements y als Wert für grid-column-end zu. Sehen wir uns an, auf welche Linie es sich beziehen wird.

.grid-item:first-child {
  grid-column-end: y;
}

Wie Sie im nächsten Bild sehen können, hat der Browser zwar die Linie y näher am ersten Element gewählt, aber die Kante der Gitterfläche verwendet, um die Endkante des Elements zu platzieren.

Beachten Sie, dass dies nicht gilt, wenn Sie die implizite Liniennamen einer Gitterfläche verwenden. Ändern wir beispielsweise den Namen der Gitterlinie im vorherigen Beispiel in y-end. Wir wissen auch, dass die Fläche mit dem Namen y eine implizite Gitterlinie y-end zugewiesen hat. Wenn wir nun y-end für grid-column-end festlegen, wird diesmal die benannte Gitterlinie gewinnen.

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

.grid-item:first-child {
  grid-column-end: y-end;
}

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 Gitterplatzierungseigenschaften in der Demo ändern, um zu sehen, was mit dem dritten Gitterelement passiert.

Browser-Unterstützung

Verwandte Tricks!

Verwandte Anleitungen

Weitere Informationen

• CSS Grid Layout Module Level 1 (W3C)
• CSS Grid Layout: Einführung (DigitalOcean)
• Platzierung, Spanning und Dichte in CSS Grid (DigitalOcean)

Verwandt