CSS-Eigenschaft grid-column-end

❮ Vorige Nächste ❯

Die CSS-Eigenschaft grid-column-end gibt an, wie viele Spalten das Grid-Element überspannen soll und auf welcher Spalte das Element nicht mehr angezeigt werden soll.

Anfangswert	auto
Gilt für	Gitterelemente
Geerbt	Nein.
Animierbar	Ja, die Anzahl der Spalten ist animierbar.
Version	CSS Grid Layout Module Level 1
DOM Syntax	object.style.gridColumnEnd = "3";

Syntax

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

Versuch es selber!

Ein weiteres Beispiel, grid-column-end durch Spanne 3 angegeben 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-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>Ein Beispiel für die Eigenschaft Grid-column-end</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>

Versuch es selber!

Werte

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