CSS grid-template-columns-Eigenschaft

Die CSS-Eigenschaft grid-template-columns definiert die Größe (Breite) jeder Spalte im Grid-Layout:

Anfangswert	none
Anwendbar auf	Grid-Container.
Vererbbar	Nein.
Animierbar	Ja. Spalten sind animierbar.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	object.style.gridTemplateColumns = "40px 40px 40px";

Syntax

CSS grid-template-columns

css

grid-template-columns: none | auto | max-content | min-content | minmax() | <length> | <percentage> | <flex> | fit-content | repeat | initial | inherit;

Beispiel für die grid-template-columns-Eigenschaft:

CSS grid-template-columns Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        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>Grid-template-columns property example</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>

Try it Yourself »

Ergebnis

CSS grid-template-columns Länge

Beispiel für die Anwendung von grid-template-columns auf grid-container:

CSS grid-template-columns Längenbeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 40px 150px auto 80px;
        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>Grid-template-columns property example</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>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
none	Dies ist der Standardwert der Eigenschaft.	Ausführen »
auto	Die Track-Größe wird durch ihren Inhalt bestimmt, kann aber wachsen, um verfügbaren Platz auszufüllen.	Ausführen »
max-content	Die Größe jeder Spalte hängt vom größten Element in der Spalte ab.	Ausführen »
min-content	Die Größe jeder Spalte hängt vom kleinsten Element in der Spalte ab.	Ausführen »
minmax(min, max)	Der Größenbereich ist größer oder gleich „min“ und kleiner oder gleich „max“.	Ausführen »
`<length>`	Die Größe der Spalten wird durch einen Längenwert angegeben.	Ausführen »
`<percentage>`	Die Größe der Spalten wird durch Prozentsätze angegeben.	Ausführen »
`<flex>`	Eine nicht-negative Dimension mit der Einheit „fr“, die den Flexfaktor des Tracks angibt. Jeder Track mit der Größe `<flex>` teilt den verbleibenden Platz proportional zu seinem Flexfaktor.	Ausführen »
fit-content	Stellt min(max-content, max(auto, argument)) dar, was ähnlich zu auto ist (d. h. minmax(auto, max-content)), aber die Größe ist größer als das auto-Minimum.	Ausführen »
repeat	Stellt ein wiederholtes Fragment der Track-Liste dar und ermöglicht es, eine große Anzahl von Spalten mit einem wiederkehrenden Muster kompakter zu schreiben.	Ausführen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.	Ausführen »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.	Ausführen »

Praxis

Welche Funktion hat die Eigenschaft 'grid-template-columns' in CSS?

Sie definiert die Anzahl der Zeilen in einem Grid-Layout.Sie wird verwendet, um die Linienamen und Track-Größenfunktionen der Grid-Spalten festzulegen.Sie hilft beim Ausrichten des Textes innerhalb des Grid-Layouts.Sie legt die Breite und Anzahl der Spalten in einem Grid-Layout fest.Sie wird verwendet, um die Hintergrundfarbe des Grids zu stylen.

CSS grid-template-columns-Eigenschaft ​

Syntax ​

Beispiel für die grid-template-columns-Eigenschaft: ​

Ergebnis ​

Beispiel für die Anwendung von grid-template-columns auf grid-container: ​

Werte ​