CSS grid-template-columns eigenschap

definitie en gebruik

grid-template-columns eigenschap bepaalt het aantal kolommen (en breedte) in het rasterontwerp.

Deze waarden zijn een lijst gescheiden door spaties, waarbij elke waarde de afmetingen van de bijbehorende kolom specificeert.

Raadpleeg ook:

CSS handleiding:CSS rasterontwerp

CSS referentiemanualgrid-template-rows eigenschap

CSS referentiemanualgrid-template eigenschap

voorbeeld

voorbeeld 1

Maak een vierkolomige rastercontainer:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

probeer het zelf

voorbeeld 2

Maak een vierkolomig rasterontwerp en bepaal de afmetingen van elke kolom:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

probeer het zelf

CSS syntaxis

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

eigenschapswaarde

waarde beschrijving
none standaardwaarde. Maak kolommen aan wanneer nodig.
auto De afmetingen van de kolommen hangen af van de grootte van het container en de grootte van de inhoud van de items in de kolom.
max-content Stel de afmetingen van elke kolom in op basis van het grootste item in de kolom.
min-content Stel de afmetingen van elke kolom in op basis van de kleinste item in de kolom.
length Stel de afmetingen van de kolommen in door gebruik te maken van legitieme lengtevelden. Raadpleeglengte-eenheid.
initial Stel deze eigenschap in op zijn standaardwaarde. Raadpleeg initial.
inherit Deze eigenschap erft van de ouderlijke element. Raadpleeg inherit.

technische details

standaardwaarde: none
inheritance: nee
animatie maken: ondersteund. Raadpleeg:animatiegerelateerde eigenschappen.
versie: CSS Grid Layout Module Level 1
JavaScript syntaxis: object.style.gridTemplateColumns="50px 50px 50px"

browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44