CSS-Eigenschaft grid-template-columns

Die Eigenschaft grid-template-columns definiert die Größe (Breite) jeder Spalte im Gitter-Layout.

Anfangswert	none
Gilt für	Gitter-Containers
Geerbt	Nein
Animierbar	Ja, die Spalten sind animierbar.
Version	CSS Grid Layout Module Level 1
DOM Syntax	object.style.gridTemplateColumns = "40px 40px 40px";

Syntax

grid-template-columns: none | auto | max-content | min-content | flex | fit-content | repeat | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      margin-top: 20px;
      }
      .example > div {
      background-color: #eee;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft grid-template-columns</h2>
    <div class="example">
      <div>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>

Versuch es selber!

Ein anderes Beispiel mit der Eigenschaft grid-templates-columns:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .grid-container {
      display: grid;
      grid-template-columns: 40px 150px auto 80px;
      grid-gap: 10px;
      background-color: #ccc;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 30px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft grid-template-columns</h2>
    <div class="grid-container">
      <div>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>

Versuch es selber!

Werte

Wert	Beschreibung
auto	Die Größe der Spalten nimmt die Größe des Containers ein, das ist der Standardwert der Eigenschaft.
max-content	Die Größe jeder Spalte hängt vom größten Element in den Spalten ab.
min-content	Die Größe jeder Spalte hängt vom kleinsten Element in den Spalten ab.
minmax(min.max)	Der Größenbereich ist größer als oder gleich "min" und kleiner als oder gleich "max".
<length>	ie Größe der Spalten wird durch den Längenwert angegeben.
<percentage>	Die Größe der Spalten wird durch Prozentsätze angegeben.
<flex>	Eine nicht-negative Dimension mit der Einheit "fr" , die den Flexfaktor der Spur angibt. Jede <flex>-sized track teilt sich den verbleibenden Platz im Verhältnis zu ihrem Flexfaktor.
fit-content	Stellt den min(max-Content, max(auto, Argument) dar, der dem auto ähnlich ist (d. h. minmax(auto, max-Gehalt)), aber die Größe ist größer als das auto-Minimum. Dieser Wert gilt als experimentell.
repeat	Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form. This value is considered to be experimental.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.