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>

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>

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.

Browser-Support

57.0+ 16.0+ 52.0+ 10.1+ 44.0+


Finden Sie das nützlich?

Ähnliche Artikel