CSS grid-column-start Eigenschaft

Die CSS-Eigenschaft grid-column-start legt die Spaltenlinie fest, an der ein Grid-Element beginnt — seine inline-start-Kante. Zusammen mit grid-column-end bestimmt sie, wie viele Spalten das Element belegt und wo es sich befindet. Beide werden häufig mit der grid-column-Kurzschreibweise kombiniert: grid-column: <start> / <end>.

Verwenden Sie grid-column-start, wenn Sie eine explizite Platzierung innerhalb eines CSS Grid-Layouts benötigen — zum Beispiel, um ein Hero-Banner ab der zweiten Spalte verlaufen zu lassen oder eine Seitenleiste unabhängig von der Quellreihenfolge in einen bestimmten Track zu verschieben.

Nummerierung der Grid-Linien: In einem Grid mit vier Spalten gibt es fünf vertikale Linien, die von der inline-start-Kante aus mit 1 bis 5 nummeriert sind. Es können auch negative Zahlen verwendet werden: -1 verweist auf die letzte Linie, -2 auf die vorletzte und so weiter.


Anfangswert	`auto`
Gilt für	Grid-Elemente
Vererbbar	Nein
Animierbar	Ja — die Startlinie ist animierbar
Version	CSS Grid Layout Module Level 1
DOM-Syntax	`object.style.gridColumnStart = "2"`

Syntax

grid-column-start: auto | <integer> | <name> | span <n> | initial | inherit;

auto — der Browser platziert das Element per Auto-Placement (Standard).
<integer> — eine Grid-Liniennummer, z. B. 2 oder -1.
<name> — eine benannte Linie, die in grid-template-columns definiert wurde.
span <n> — das Element überspannt n Spalten-Tracks ab seiner aktuellen Position.

Werte

Wert	Beschreibung
`auto`	Standard. Das Element folgt der normalen Auto-Platzierung und belegt eine Spalte.
`<integer>`	Eine positive oder negative Liniennummer. Negative Werte zählen vom Ende des expliziten Grids.
`<name>`	Der Name einer Grid-Linie, z. B. `main-start`, wenn diese über `[main-start]` in `grid-template-columns` definiert wurde.
`span <n>`	Überspannt `n` Spalten-Tracks. Im Gegensatz zu einer Liniennummer wird die Startposition des Elements dabei nicht festgelegt.
`initial`	Setzt die Eigenschaft auf ihren Anfangswert zurück (`auto`).
`inherit`	Erbt den Wert vom übergeordneten Element.

Beispiele

Ein Element an einer bestimmten Linie platzieren

Die Angabe grid-column-start: 2 platziert das erste Element so, dass seine linke Kante an der zweiten vertikalen Grid-Linie ausgerichtet ist und es damit in den zweiten Spaltenplatz rückt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: 6;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: 6 — implicit column created</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Probier es selbst »

Da die Vorlage nur vier Spalten (Linien 1–5) definiert, zwingt die Angabe, box1 bei Linie 6 zu starten, den Browser dazu, implizite Spalten (Linien 5 und 6) zu erstellen. Das ist ein häufiger Stolperstein — prüfen Sie stets, ob Ihre Liniennummer im expliziten Grid bleibt, es sei denn, Sie wollen implizite Tracks anlegen.

![Grid-column-start Eigenschaft](/uploads/media/default/0001/03/52b22b9f4f2b6f8f1d65a6fb309fe3ee15e77b77.png "Grid-column-start property" =420x)

Spalten mit `span` überspannen

Mit span 2 wird dem Element mitgeteilt, zwei Spalten-Tracks ab der durch Auto-Placement bestimmten Position zu belegen. Anders als eine Liniennummer ist span relativ — die genaue Startposition wird weiterhin durch Auto-Placement festgelegt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .span-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #888;
        padding: 10px;
        margin-top: 20px;
      }
      .span-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .span-box1 {
        grid-column-start: span 2;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: span 2</h2>
    <div class="span-container">
      <div class="span-box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Probier es selbst »

Dies ist die lesbarste Form, wenn es auf die Breite eines Elements in Spalten ankommt, aber nicht auf die genaue Position. Um sowohl die Position festzulegen als auch die Breite zu steuern, kombinieren Sie grid-column-start mit grid-column-end oder verwenden Sie die grid-column-Kurzschreibweise.

Standard-Auto-Platzierung

Bei auto (dem Standard) wird das Element in die nächste verfügbare Zelle eingefügt, wie vom grid-auto-flow-Algorithmus bestimmt. Elemente füllen das Grid Zeile für Zeile.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: auto;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: auto (default)</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
      <div class="box7">7</div>
      <div class="box8">8</div>
      <div class="box9">9</div>
    </div>
  </body>
</html>

Probier es selbst »

An Spalte 4 verankern

grid-column-start: 4 richtet die linke Kante des ersten Elements an der vierten vertikalen Linie aus. Die übrigen Elemente füllen die früheren Spalten per Auto-Placement.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 12px;
        background-color: red;
        padding: 15px;
      }
      .grid-container > div {
        background-color: #dcdcdc;
        text-align: center;
        padding: 20px 0;
        font-size: 35px;
        color: white;
      }
      .box1 {
        grid-column-start: 4;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: 4</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>
</html>

Probier es selbst »

Häufige Muster und Stolpersteine

Start und Ende für exakte Platzierung kombinieren

Für die vollständige Kontrolle über die Platzierung kombinieren Sie grid-column-start mit grid-column-end. Die grid-column-Kurzschreibweise ist dabei am kompaktesten:

/* Place item from column line 2 to column line 4 (spans 2 tracks) */
.item {
  grid-column: 2 / 4;
  /* equivalent to: */
  /* grid-column-start: 2; */
  /* grid-column-end: 4; */
}

Negative Liniennummern verwenden

Negative Ganzzahlen zählen vom Ende des expliziten Grids. -1 ist die letzte Linie des expliziten Grids, sodass sich ein Element leicht bis zum rechten Rand strecken lässt, ohne die genaue Spaltenanzahl kennen zu müssen:

/* Full-width banner across all explicit columns */
.banner {
  grid-column-start: 1;
  grid-column-end: -1;
}

Dies entspricht grid-column: 1 / -1. Beachten Sie, dass negative Zahlen nur Linien im expliziten Grid adressieren (definiert durch grid-template-columns) und keine durch Überlauf erzeugten impliziten Spalten erreichen.

Benannte Linien

Wenn Sie in grid-template-columns benannte Linien definieren, können Sie diese statt Nummern referenzieren. Dadurch wird das Layout selbsterklärend:

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}

.sidebar {
  grid-column-start: sidebar-start;  /* or just: grid-column-start: 1 */
}

.main {
  grid-column-start: content-start;  /* or: grid-column-start: 2 */
}

Benannte Linien sind besonders nützlich in großen oder wiederverwendbaren Layout-Komponenten, bei denen sich Spaltennummern ändern können.

Wechselwirkung mit Auto-Placement

Wenn grid-column-start auf eine explizite Linie gesetzt wird, setzt das Auto-Placement für nachfolgende Elemente ab der nächsten verfügbaren Zelle nach dem explizit platzierten Element fort. Das kann Lücken hinterlassen, wenn keine Elemente zum Füllen vorhanden sind — verwenden Sie grid-auto-flow: dense, um Lücken automatisch aufzufüllen.

Übung

Was bewirkt die CSS-Eigenschaft grid-column-start?

Sie weist den Browser an, wo die Spalte in einem Grid-Layout beginnen soll.Sie gibt die Absender-E-Mail-Adresse in einem Kontaktformular an.Sie legt die Zeichenkodierung des HTML-Dokuments fest.Sie bestimmt die Breite eines Rahmens in einem Grid-Layout.Sie legt fest, wo ein Element in einem Grid-Layout platziert wird.

Syntax

Werte

Beispiele

Ein Element an einer bestimmten Linie platzieren

Spalten mit span überspannen

Standard-Auto-Platzierung

An Spalte 4 verankern

Häufige Muster und Stolpersteine

Start und Ende für exakte Platzierung kombinieren

Negative Liniennummern verwenden

Benannte Linien

Wechselwirkung mit Auto-Placement

Verwandte Eigenschaften

Übung

Spalten mit `span` überspannen