W3docs
de
Anmelden

CSS grid-column Eigenschaft

CSS grid-column Kurzschreibweise meistern: Elemente per Liniennummer, Span, negativem Index oder benannten Linien platzieren. Mit Live-Beispielen.

Die CSS-Eigenschaft grid-column ist eine Kurzschreibweise, die ein Grid-Element entlang der horizontalen (inline) Achse positioniert. Sie legt fest, wo das Element beginnt und wo es endet, wodurch zusammen die Spaltenposition und die Anzahl der überspannten Spalten bestimmt werden. Sie kombiniert die beiden Langformen:

Ein Grid wird durch Grid-Linien unterteilt, und grid-column funktioniert, indem auf diese Linien verwiesen wird, nicht auf die Zellen zwischen ihnen. In einem vier-spaltigen Grid gibt es fünf vertikale Linien, nummeriert von 1 bis 5 von links nach rechts (oder von −5 bis −1 vom rechten Rand aus gezählt).

Hinweis: grid-column steuert nur die Platzierung entlang der Spalten. Um ein Element über Zeilen zu positionieren, verwenden Sie grid-row. Um ein Element gleichzeitig nach Zeile und Spalte zu platzieren, verwenden Sie grid-area.

Anfangswertauto / auto
Gilt fürGrid-Elemente
VererbbarNein
AnimierbarJa
SpezifikationCSS Grid Layout Level 1
DOM-Syntaxobject.style.gridColumn = "1 / span 3"

Syntax

/* Two explicit line numbers */
grid-column: <start-line> / <end-line>;

/* Start line + span count */
grid-column: <start-line> / span <number>;

/* Span by named line */
grid-column: span <name>;

/* Single value (sets start; end defaults to auto) */
grid-column: <start-line>;

/* Global keywords */
grid-column: initial | inherit | unset | revert;

Wertformen

Es gibt vier gängige Möglichkeiten, grid-column zu schreiben:

FormBeispielWas es bewirkt
Zwei Liniennummern2 / 4Beginnt an Linie 2, endet an Linie 4 (überspannt Spalten 2–3)
Start + Anzahl der Spans2 / span 2Beginnt an Linie 2, überspannt 2 Spalten vorwärts
Negative Liniennummer1 / -1Überspannt von der ersten bis zur letzten Linie (volle Breite)
Benannte Liniencontent-start / content-endVerwendet Namen aus grid-template-columns
Einzelner Wert3Setzt grid-column-start: 3; End ist auto (eine Spalte)

Wenn Sie nur einen Wert angeben (ohne /), wird nur grid-column-start gesetzt; grid-column-end ist standardmäßig auto und platziert das Element in einem einzelnen Spalten-Track.

Wie Grid-Linien nummeriert werden

Grid-Linien werden ab 1 am Startrand gezählt (links in LTR-Layouts). Sie können auch negative Zahlen verwenden, um vom Endrand aus zu zählen, sodass −1 immer auf die letzte Linie verweist, unabhängig davon, wie viele Spalten vorhanden sind.

Column tracks:  [  1  ][  2  ][  3  ][  4  ]
Line numbers:  1       2      3      4       5
Negative:     -5      -4     -3     -2      -1

Das bedeutet, dass grid-column: 1 / -1 ein Element immer über die gesamte Breite des expliziten Grids erstreckt, unabhängig von der Spaltenanzahl.

Beispiele

Ein Element mit expliziten Liniennummern platzieren

Box 6 wird zwischen den Spaltenlinien 2 und 4 platziert und überspannt damit die Spalten 2 und 3.

<!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: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .box6 {
        grid-column: 2 / 4;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column property example</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>
  </body>
</html>
Probier es selbst »
CSS grid-column Eigenschaft: Box 6 überspannt Spalten 2 bis 4 in einem Grid

Das erste Element mit 1 / 3 platzieren

Box 1 wird bei grid-column: 1 / 3 platziert und belegt damit die ersten zwei Spalten-Tracks.

<!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: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column: 1 / 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column property example</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>
  </body>
</html>
Probier es selbst »

span und ein Element mit voller Breite (1 / -1) verwenden

Das Schlüsselwort span ist nützlich, wenn Sie wissen, wie viele Spalten abgedeckt werden sollen, aber nicht die abschließende Liniennummer kennen. Eine negative Endlinie (-1) erreicht immer die letzte Spaltenlinie und lässt das Element die gesamte Breite des expliziten Grids einnehmen.

<!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: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #4caf50;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .featured {
        grid-column: 1 / span 2; /* starts at line 1, covers 2 columns */
      }
      .full-width {
        grid-column: 1 / -1; /* spans the whole explicit grid */
      }
    </style>
  </head>
  <body>
    <h2>span and full-width example</h2>
    <div class="grid-container">
      <div class="featured">Featured (2 cols)</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div class="full-width">Full width (1 / -1)</div>
    </div>
  </body>
</html>

Elemente mit benannten Linien platzieren

Sie können Grid-Linien in grid-template-columns mit der eckigen-Klammer-Syntax benennen und diese Namen dann in grid-column referenzieren. Dies macht Layouts lesbarer und unempfindlicher gegenüber Änderungen der Spaltenanzahl.

<!DOCTYPE html>
<html>
  <head>
    <title>Named grid lines</title>
    <style>
      .grid-container {
        display: grid;
        /* Names the lines around the middle two columns */
        grid-template-columns:
          [full-start] 1fr
          [content-start] 2fr 2fr
          [content-end] 1fr
          [full-end];
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #5c6bc0;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 18px;
      }
      .sidebar {
        grid-column: full-start / content-start; /* first column only */
      }
      .main {
        grid-column: content-start / content-end; /* middle two columns */
      }
      .aside {
        grid-column: content-end / full-end; /* last column only */
      }
    </style>
  </head>
  <body>
    <h2>Named lines example</h2>
    <div class="grid-container">
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="aside">Aside</div>
    </div>
  </body>
</html>

Werte

WertBeschreibung
<line-number>Eine ganzzahlige Liniennummer (positiv zählt vom Startrand, negativ vom Endrand).
<line-name>Ein benutzerdefinierter Name, der in grid-template-columns festgelegt wurde.
span <number>Überspannt die angegebene Anzahl von Spalten-Tracks.
span <name>Überspannt bis zur nächsten Linie mit dem angegebenen Namen.
autoDer Browser platziert das Element automatisch (Standard).
initialSetzt auf den Standardwert zurück (auto / auto).
inheritErbt den berechneten Wert vom übergeordneten Element.
unsetVerhält sich wie inherit, wenn die Eigenschaft vererbbar ist, andernfalls wie initial.

Häufige Fallstricke

  • 1 / -1 überspannt nur das explizite Grid. Wenn Elemente im impliziten Grid platziert werden (zusätzliche Zeilen/Spalten, die der Browser automatisch erstellt), erstreckt sich eine negative Endlinie nicht in diese Tracks. Definieren Sie zuerst das vollständige Grid mit grid-template-columns.
  • span ohne Startlinie. Das Schreiben von grid-column: span 3 setzt nur grid-column-end: span 3; der Start ist auto, sodass der Browser ihn bestimmt. Dies ist gültig, aber die Platzierung hängt von der Auto-Flow-Reihenfolge ab.
  • Benannte-Linien-Suche. Wenn Sie auf einen Namen verweisen, der nicht in der Vorlage existiert, behandelt der Browser ihn als auto. Überprüfen Sie den Namen in grid-template-columns immer sorgfältig.
  • Kurzschreibweise mit Einzelwert. grid-column: 3 setzt den Start auf Linie 3 und das End auf auto — nicht auf Linie 4. Das Element belegt genau einen Spalten-Track, es sei denn, das automatisch platzierte Ende überspannt zufällig mehr.

Verwandte Eigenschaften

Übung

Übung
Was ist die Funktion der Eigenschaft 'grid-column' in CSS?
Was ist die Funktion der Eigenschaft 'grid-column' in CSS?
Was this page helpful?