W3docs
de
Anmelden

CSS grid-column-end Eigenschaft

Die CSS-Eigenschaft grid-column-end legt fest, wo ein Grid-Element endet – per Zeilennummer oder span. Syntax, Werte und Beispiele.

Die CSS-Eigenschaft grid-column-end legt fest, wo ein Grid-Element entlang der Inline-Achse (Spaltenachse) endet. Man gibt ihr entweder eine Spaltenlinie an, bei der gestoppt werden soll, oder ein span, das angibt, wie viele Spalten das Element umfassen soll. Zusammen mit grid-column-start definiert sie die Inline-Start- und Inline-End-Kanten des Grid-Bereichs des Elements.

Wie Grid-Linien nummeriert werden

Ein Grid wird durch nummerierte Linien begrenzt, nicht durch die Tracks (Spalten) selbst. Ein Grid mit drei Spalten hat vier vertikale Linien: Linie 1 verläuft entlang der linken Kante, Linie 4 entlang der rechten Kante.

 line:  1     2     3     4
        | col | col | col |

grid-column-end bezieht sich auf eine dieser Linien:

  • grid-column-end: 3 lässt das Element an Linie 3 enden — es stoppt vor der dritten Spalte.
  • grid-column-end: span 2 lässt das Element 2 Spalten nach seinem Startpunkt enden, unabhängig von der absoluten Liniennummer.

Man kann auch von hinten mit negativen Zahlen zählen: -1 ist die letzte Linie, -2 die davor. So erreicht grid-column-end: -1 immer die rechte Kante des Grids, egal wie viele Spalten vorhanden sind — praktisch für „vollbreite" Elemente.

Tipp: Der Wert beschreibt nur, wo das Element endet. Wo es beginnt, kommt von grid-column-start (oder wird automatisch platziert). Die Kurzschreibweise grid-column setzt beides auf einmal, z. B. grid-column: 1 / 3.

Anfangswertauto
Gilt fürGrid-Elemente.
VererbbarNein.
AnimierbarJa. Die Anzahl der Spalten ist animierbar.
VersionCSS Grid Layout Module Level 1
DOM-Syntaxobject.style.gridColumnEnd = "3";

Syntax

Syntax der CSS-Eigenschaft grid-column-end

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

Beispiel der grid-column-end-Eigenschaft:

Beispiel der CSS-Eigenschaft grid-column-end mit dem Wert auto

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 5px;
        background-color: #8ebf42;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end property example</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>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS grid-column-end Eigenschaft

Beispiel der grid-column-end-Eigenschaft mit Liniennummern und span-Werten:

Beispiel der CSS-Eigenschaft grid-column-end mit dem Wert span n

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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-end: 3;
      }
      .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: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .span-box1 {
        grid-column-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end property example</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>
    <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 »

Das obere Grid verwendet grid-column-end: 3 (eine Liniennummer), sodass das erste Element bei Linie 3 endet und zwei Spalten umfasst. Das untere Grid verwendet grid-column-end: span 3, sodass das Element drei Spalten ab seiner eigenen Position überspannt.

Im folgenden Beispiel wird erneut span verwendet, um zu steuern, wie viele Spalten das Element umfasst.

Beispiel der grid-column-end-Eigenschaft mit dem Wert „span n":

Beispiel der CSS-Eigenschaft grid-column-end mit dem Wert 'span n'

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 25px;
        padding: 20px;
        background-color: #7cbf7c;
      }
      article div {
        text-align: center;
        font-size: 35px;
        background-color: #ffffff;
        padding: 30px 0;
      }
      article div:first-child {
        grid-column-end: span 3;
      }
    </style>
  </head>
  <body>
    <article>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </article>
  </body>
</html>
Probier es selbst »

Im nächsten Beispiel gibt der angewendete Wert an, bei welcher Spalte die Anzeige des Elements enden soll.

Beispiel der grid-column-end-Eigenschaft mit einem Liniennummernwert:

Beispiel der CSS-Eigenschaft grid-column-end mit dem Wert 'column-line':

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-gap: 5px;
        background-color: #8ebf42;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
        padding: 30px;
      }
      .grid-container > div {
        text-align: center;
        font-size: 35px;
        background-color: white;
        padding: 20px 0;
      }
      .box1 {
        grid-column-end: 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end property example</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>
  </body>
</html>
Probier es selbst »

Beispiel der grid-column-end-Eigenschaft mit dem Wert „auto":

Beispiel der Verwendung der CSS-Eigenschaft grid-column-end mit dem Wert auto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 5px;
        background-color: #8ebf42;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-end 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 »

Werte

WertBeschreibungAusprobieren
autoPlatziert das Element automatisch; standardmäßig umfasst es eine einzelne Spalte. Dies ist der Anfangswert.Ausprobieren »
span nDas Element endet n Spalten nach seiner Startlinie.Ausprobieren »
column-lineEine Liniennummer (positiv oder negativ) oder eine benannte Linie, bei der das Element enden soll.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert (auto).
inheritÜbernimmt den Wert vom übergeordneten Element.

Häufige Fehlerquellen

  • span ist relativ, Linien sind absolut. grid-column-end: 3 endet immer bei Linie 3; grid-column-end: span 3 endet drei Spalten nach der Startlinie. Diesen Unterschied zu verwechseln ist der häufigste Grid-Fehler.
  • Endet vor dem Start – der Browser tauscht die Werte. Wenn grid-column-end auf eine Linie vor grid-column-start aufgelöst wird, werden die beiden Werte vertauscht, sodass der Bereich weiterhin gültig ist.
  • grid-column-end allein bewegt den Start nicht. Nur das Ende zu setzen lässt den Start automatisch platziert. Um beides festzulegen, verwendet man die Kurzschreibweise grid-column.

Verwandte Eigenschaften

Übung

Übung
Was regelt die Eigenschaft 'grid-column-end' in CSS?
Was regelt die Eigenschaft 'grid-column-end' in CSS?
Was this page helpful?