w3docs logo

CSS-Eigenschaft grid-column-start

Die Eigenschaft grid-column-start gibt die Startposition des Elements innerhalb der Spalte an.

Anfangswert auto
Gilt für Grid-Elemente
Geerbt Nein
Animierbar Ja, der Anfangspunkt ist animierbar.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridColumnStart = "6";

Syntax

grid-column-start: auto | span n | column-line | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-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>Ein Beispiel für die Eigenschaft Grid-column-start</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>

Ein weiteres Beispiel, wo grid-column-start durch Span 2 definiert wird:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .span-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-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>Ein Beispiel für die Eigenschaft Grid-column-start</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>

Werte

Wert Beschreibung
auto Es wird nur eine Spalte überspannt. Das ist der Standardwert dieser Eigenschaft.
span n Gibt die Anzahl der Spalten an, die das Element überspannen soll.
column-line Definiert, in welcher Spalte die Anzeige des Elements beginnen soll.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
57.0+ 16.0+ 52.0+ 10.1+ 44.0+

Übe dein Wissen

Was ist die Funktion der CSS-Eigenschaft 'grid-column-start'?
Finden Sie das nützlich?