CSS Almanac → Eigenschaften → G → grid-column-start

grid-column-start

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-column-start ist Teil der CSS Grid Layout Spezifikation und wird verwendet, um die Spaltengitterlinie anzugeben, an der ein Gitterelement in einem Gitterlayout beginnt. Diese Eigenschaft – neben anderen linienbasierten Platzierungs-Gittereigenschaften – 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-start: 3; /* Item starts on the third column line */
}

Basierend auf dem standardmäßigen automatischen Platzierungsverhalten von CSS Grid sollte das zweite untergeordnete Element des Gitters in diesem Beispiel in der zweiten Spalte platziert werden. Wir haben jedoch eine grid-column-start Position an der dritten Gitterlinie deklariert, wodurch das Gitterelement in die dritte Spalte verschoben und seine Startkante mit der dritten Gitterlinie ausgerichtet wird.

A three-by-two grid with five items.
Verschiebung des zweiten Gitterelements in die dritte Spalte mithilfe der CSS Grid-Eigenschaft grid-column-start.

Inhaltsverzeichnis

Syntax

grid-column-start: <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-start: auto;

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

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

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

/* Global values */
grid-column-start: inherit;
grid-column-start: initial; /* same as `auto` */
grid-column-start: revert;
grid-column-start: revert-layer;
grid-column-start: 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 sich auf eine nummerierte Gitterlinie zu beziehen, oder einen String, um sich auf eine benannte Gitterlinie oder einen benannten Gitterbereich zu beziehen. Mit anderen Worten, Sie können eine Gitterlinie anhand ihres numerischen Index oder Namens für die Startkante 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 three-by-two-grid with six items.

Im ersten Beispiel dieses Artikels haben wir diese Syntax verwendet, um uns mit dem Index (3) auf die dritte Gitterlinie zu beziehen, um die Startkante des Gitterelements mit der Startkante der dritten Spalte unter Verwendung der <custom-ident>-Syntax auszurichten.

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

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

.grid-item:nth-child(2) {
  grid-column-start: -2; /* same as 3 */
}

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

A three-by-two grid with five items where the second item is positioned in the third column with the grid-column-start CSS property.
Verschiebung des zweiten Gitterelements in die dritte Spalte mithilfe der CSS Grid-Eigenschaft grid-column-start.
Positionierung von Elementen nach Liniennamen

Sie können einer Gitterlinie mit grid-template-columns und grid-template-rows einen benutzerdefinierten Namen zuweisen und linienbasierte Platzierungs-Gittereigenschaften verwenden, um sich auf diese Linie mit ihrem Namen 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 statt mit seinem Index auf die dritte Linie beziehen

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

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 nach Gitterbereichen

Wenn Sie Gitterbereiche mit der Eigenschaft grid-template-areas definieren, erhalten Sie kostenlos implizite Liniennamen, die auf dem Namen der Bereiche basieren. Zum Beispiel erzeugt ein Gitterbereich mit dem Namen sidebar davor eine Linienname sidebar-start und danach eine sidebar-end. Sie können diese Linien verwenden, um die Position eines Gitterelements festzulegen.

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

Alternativ können Sie sich auf den Namen des Bereichs beziehen, um ein Element an der Startlinie des benannten Bereichs sidebar zu positionieren

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

Da Sie in diesem Beispiel die Eigenschaft grid-column-start verwenden, versteht der Browser, dass Sie die Linie sidebar-start des Bereichs sidebar meinen; daher wird die Startkante des Gitterelements mit der Startkante des Gitterbereichs 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-start: sidebar-start;
}

Dies setzt die Position des aside-Elements auf den sidebar-Bereich in unserem Gitter.

<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-start: 2 bar; /* The second `bar` named line which is the third line */
}
A single row grid with three columns and the second item in the third column.

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

.grid-item:nth-child(2) {
  grid-column-start: 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-start: -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 ein Gitterelement drei Spaltenspuren in Richtung seiner Startkante überspannt, können wir den folgenden Wert anwenden.

.grid-item:nth-child(2) {
  grid-column-start: span 3;
}
A six-by-two grid where the second item spans three columns.
Das Gitterelement überspannt drei Spalten mithilfe der Eigenschaft grid-column-start.

Wenn wir span zum Platzieren der Startlinie eines Elements verwenden, überspannt es technisch gesehen rückwärts statt vorwärts zur Endlinie, was normalerweise in realen Szenarien der Fall ist.

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: span thirdline;
  grid-column-end: 6;
}

Da die Endlinie des Gitterelements bekannt ist (6), können wir das Element bis zur Gitterlinie mit dem Namen thirdline überspannen.

A five-by-two grid where the third item spans three columns.
Das Gitterelement überspannt das Gitter, bis es die angegebene Gitterlinie mit dem Namen thirdline erreicht, mithilfe der CSS-Eigenschaft grid-column-start.
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: span x 2;
  grid-column-end: 5; /* equivalent to grid-column-end: x 3; */
}

Wir setzen die Endlinie des Gitterelements auf die fünfte Linie. Dann möchten wir, dass es zur Startlinie überspannt, bis es eine Gitterlinie mit dem Namen x erreicht. Und da wir möchten, dass es die zweite x-Gitterlinie ist, landen wir bei grid-column-start: span x 2.

Als Ergebnis beginnt unser Gitterelement, von der fünften Linie zur Startlinie hin zu überspannen, wie unten gezeigt. Die erste Linie, die es trifft, heißt y, dann die erste x, und schließlich trifft es die gewünschte zweite Linie mit dem Namen x.

A five-by-three grid where each row has a few empty columns.
Festlegen der Position eines Gitterelements von der fünften Linie zurück zur zweiten benannten Linie in Richtung der Startkante des Elements mithilfe der Eigenschaft grid-column-start.

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.

Erstellen wir ein Gitter mit zwei Spalten und setzen die Position seines Elements auf nicht existierende Linien. Im folgenden Beispiel haben wir nur zwei Spalten und keine unserer Gitterlinien benannt. Es gibt also keine Linie mit dem Index 5 und keine Linie mit dem Namen test, aber wir setzen diese Werte für 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 zu unserem Code hinzu.

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

A single-row grid with five columns, two of which are explicit.
Das Geben von Gitterplatzierungseigenschaften mit Werten, die nicht existieren, bewirkt, dass das Gitter implizite Spuren erstellt, um unser Gitterelement positionieren zu können.

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. Da wir einen solchen Namen in unserem Gitter nicht haben und möchten, dass diese Gitterlinie mit der Startkante unseres Gitterelements ausgerichtet wird, wird eine implizite Spaltenspur auf der Startseite des expliziten Gitters in der Inline-Richtung erstellt und ihre Linie ist test.

Positionierung von Gitterelementen kann Lücken verursachen

Wie Sie in den vorherigen Beispielen gesehen haben, kann die linienbasierte Positionierung leere Räume zwischen Gitterelementen verursachen.

Falls diese Lücken in Ihrem Design unerwünscht sind, können sie einfach behandelt werden, indem Sie dem Gittercontainer die Eigenschaft grid-auto-flow mit dem Wert dense zuweisen.

Showing the before and after results of using a dense CSS Grid layout.
Die Eigenschaft grid-auto-flow kann leere Räume füllen, die durch linienbasierte Positionierung verursacht werden.

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

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 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;
}
Four overlapping grid items in a five-by-five grid.
Das zweite Gitterelement mit der Eigenschaft z-index an die Spitze des Stapels bringen.

Verwendung eines negativen Index für mehr Flexibilität

Es gibt Fälle, in denen Sie ein elementfüllendes Element in Ihrem Gitter haben möchten, was bedeutet, dass es von der ersten Gitterlinie bis zur letzten reicht. Zum Beispiel ist in einem Gitter mit vier Spalten der Index der Endlinie 5, sodass Sie den folgenden Code schreiben können, um Ihr elementfüllendes Element zu haben.

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

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

Das funktioniert einwandfrei, aber was, wenn sich die Anzahl der Spalten auf sechs ändert? 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;
}

Nun, unabhängig davon, wie viele Spalten wir haben, dehnt sich das Gitterelement mit der Klasse full-width immer über das Gitter aus.

Gitterlinien-Indizes hängen vom Schreibmodus ab

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

Two single-row grids with four columns, one showing a left-to-right writing mode and the other showing a right-to-left writing mode.
Demonstration, wie sich der Schreibmodus auf die Richtung eines Gitterlayouts und die Indizes seiner Gitterlinien auswirkt.

Berücksichtigen Sie also die Schreibrichtung Ihres Gitters, wenn Sie einen Gitterlinienindex zur Positionierung von Gitterelementen mithilfe einer Eigenschaft wie grid-column-start verwenden.

Benannter Bereich hat Vorrang vor benannter Linie

Wenn ein benannter Gitterbereich denselben Namen wie eine Linienname hat, bevorzugt der Platzierungsalgorithmus die Linien des benannten Gitterbereichs.

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 Bereich mit demselben Namen definiert. Nun, um das erste Gitterelement zu positionieren, weisen wir y als Wert für grid-column-start zu. Sehen wir uns an, auf welche Linie es verweisen wird.

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

Wie Sie im nächsten Bild sehen können, hat der Browser die Kante des Gitterbereichs ausgewählt, um die Startkante des Elements zu platzieren, obwohl die y-Linie näher am ersten Element liegt.

Ein Gitterbereich und eine Gitterlinie haben denselben Namen, y. Der Browser wählt die Gitterbereichslinie gegenüber der benannten Gitterlinie aus, wenn Sie diesen Namen Gitterplatzierungseigenschaften zuweisen.

Beachten Sie, dass dies nicht gilt, wenn Sie den impliziten Namen der Linie eines Gitterbereichs verwenden. Ändern wir zum Beispiel den Namen der Gitterlinie im vorherigen Beispiel in y-start. Wir wissen auch, dass der Bereich mit dem Namen y eine implizite Gitterlinie y-start zugewiesen hat. Wenn wir nun y-start für grid-column-start festlegen, gewinnt diesmal die benannte Gitterlinie.

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

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

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

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.

© .