grid-template-columns CSS property

Probieren Sie es aus

grid-template-columns: 60px 60px;

grid-template-columns: 1fr 60px;

grid-template-columns: 1fr 2fr;

grid-template-columns: 8ch auto;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 200px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

Syntax

/* Keyword value */
grid-template-columns: none;

/* <track-list> values */
grid-template-columns: 100px 1fr;
grid-template-columns: [line-name] 100px;
grid-template-columns: [line-name1] 100px [line-name2 line-name3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/* <auto-track-list> values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [line-name1] 100px [line-name2]
  repeat(auto-fit, [line-name3 line-name4] 300px)
  100px;
grid-template-columns:
  [line-name1 line-name2] 100px
  repeat(auto-fit, [line-name1] 300px) [line-name3];

/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: revert;
grid-template-columns: revert-layer;
grid-template-columns: unset;

Werte

none

Gibt an, dass kein explizites Gitter vorhanden ist. Alle Spalten werden implizit generiert und ihre Größe wird durch die Eigenschaft grid-auto-columns bestimmt.

[line-name]

Ein <custom-ident>, der einen Namen für die Linie an dieser Stelle spezifiziert. Das Ident kann jede gültige Zeichenfolge sein, außer den reservierten Wörtern span und auto. Linien können mehrere Namen haben, die innerhalb der eckigen Klammern durch Leerzeichen getrennt sind, zum Beispiel [line-name-a line-name-b].

<length>

Eine nicht-negative Länge, die die Breite der Spalte angibt.

<percentage>

Ein nicht-negativer <percentage>-Wert relativ zur Inline-Größe des Gittercontainers. Wenn die Größe des Gittercontainers von der Größe seiner Tracks abhängt, behandelt der Browser den Prozentsatz als auto. Der Browser kann die intrinsischen Größenbeiträge des Tracks an die Größe des Gittercontainers anpassen und die endgültige Größe des Tracks um den minimalen Betrag erhöhen, der erforderlich ist, um den Prozentsatz zu berücksichtigen.

<flex>

Ist eine nicht-negative Dimension mit der Einheit fr, die den Flex-Faktor des Tracks angibt. Jeder <flex>-große Track nimmt einen Anteil des verbleibenden Platzes im Verhältnis zu seinem Flex-Faktor ein.

Wenn außerhalb einer minmax()-Notation auftretend, impliziert es ein automatisches Minimum (d.h. minmax(auto, <flex>)).

max-content

Ist ein Schlüsselwort, das den größten maximalen Inhaltsbeitrag der Gitternetz-Elemente darstellt, die den Gitternettrack belegen. Zum Beispiel, wenn das erste Element des Gitternettracks den Satz "Repetitio est mater studiorum" enthält und das zweite Element den Satz "Dum spiro, spero", wird der maximale Inhaltsbeitrag durch die Größe des größten Satzes unter allen Gitterelementen definiert - "Repetitio est mater studiorum".

min-content

Ist ein Schlüsselwort, das den größten minimalen Inhaltsbeitrag der Gitternetz-Elemente darstellt, die den Gitternettrack belegen. Zum Beispiel, wenn das erste Element des Gitternettracks den Satz "Repetitio est mater studiorum" enthält und das zweite Element den Satz "Dum spiro, spero", wird der minimale Inhaltsbeitrag durch die Größe des größten Wortes unter allen Sätzen in den Gitterelementen definiert - "studiorum".

minmax(min, max)

Ist eine funktionale Notation, die einen Größenbereich definiert, der größer oder gleich min und kleiner oder gleich max ist. Wenn max kleiner als min ist, wird max ignoriert und die Funktion als min behandelt. Als Maximum setzt ein <flex>-Wert den Flex-Faktor des Tracks. Es ist als Minimum ungültig.

auto

Als maximaler Wert stellt es die größte max-content-Größe der Elemente in diesem Track dar.

Als minimaler Wert stellt es die größte Mindestgröße der Elemente in diesem Track dar (festgelegt durch die min-width/min-height-Eigenschaften der Elemente). Dies entspricht häufig der min-content-Größe, aber nicht immer.

Wenn außerhalb von minmax()-Notation verwendet, stellt auto den Bereich zwischen den oben beschriebenen minimalen und maximalen Werten dar. In den meisten Fällen verhält es sich ähnlich wie minmax(min-content,max-content).

Hinweis: Auto-Track-Größen (und nur auto-Track-Größen) können durch die Eigenschaften align-content und justify-content gestreckt werden. Daher nimmt ein auto-großer Track standardmäßig den verbleibenden Platz im Gittercontainer ein.

fit-content( [ <length> | <percentage> ] )

Stellt die Formel max(minimum, min(limit, max-content)) dar, wobei minimum ein automatic Minimum darstellt (das häufig, aber nicht immer, einem min-content-Minimum entspricht), und limit die Track-Größenfunktion ist, die als Argument an fit-content() übergeben wird. Grundsätzlich wird dies als die kleinere von minmax(auto, max-content) und minmax(auto, limit) berechnet.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

Stellt ein wiederholtes Fragment der Track-Liste dar, das es ermöglicht, eine große Anzahl von Spalten mit einem wiederkehrenden Muster in kompakter Form zu schreiben.

masonry

Der Mauerwerkswert gibt an, dass diese Achse gemäß dem Mauerwerksalgorithmus ausgelegt werden soll.

subgrid

Der subgrid-Wert gibt an, dass das Gitter den überbrückten Teil seines Eltern-Gitters auf dieser Achse übernehmen wird. Anstatt explizit festgelegt zu werden, werden die Größen der Gitterzeilen/-spalten von der Definition des Eltern-Gitters übernommen.

Formale Definition

Formale Syntax

grid-template-columns = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<integer> = 
  <number-token>  

<fixed-breadth> = 
  <length-percentage [0,∞]>  

Beispiele

Größen der Gitterspalten angeben

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• grid-template-rows
• grid-template-areas
• grid-template
• Grundkonzepte des Gitterlayouts: Gitterstreifen
• Video: Ein Gitter definieren
• Untergitter