w3docs logo

CSS-Eigenschaft grid-column

Die Eigenschaft grid-column definiert Größe und Position des Gitterelements in einem Gitterlayout. Es ist eine Abkürzung für die folgenden Eigenschaften:

Anfangswert auto auto
Gilt für Gitter-Elemente
Geerbt Nein
Animierbar Ja, die Elemente sind animierbar.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridColumn = "1/ span 3";

Syntax

grid-column: grid-column-start / grid-column-end | 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: #ccc;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #666;
      text-align: center;
      padding: 20px 0;
      font-size: 20px;
      }
      .box6 {
      grid-column: auto auto;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für die Eigenschaft Grid-column</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>

Ein anderes Beispiel, wo grid-column 1 / 3 ist:

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: #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>Ein Beispiel für die Eigenschaft Grid-column</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>

Werte

Wert Beschreibung
grid-column-start Gibt die Startposition des Elements innerhalb der Spalte an.
grid-column-end Zeigt die Endposition des Elements innerhalb der Spalte an.
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 unterscheidet die CSS-Eigenschaft 'grid-column' von anderen CSS-Eigenschaften?
Finden Sie das nützlich?