CSS grid-template-columns ominaisuus

Määrittely ja käyttö

grid-template-columns-ominaisuus määrittelee verkkotasojen sarakkeiden määrän (ja leveyden).

Nämä arvot ovat välistäerottimella erotettu luettelo, jossa jokainen arvo määrittää vastaavan sarkeen koon.

Katso myös:

CSS-opas:CSS-verkkotasot

CSS viittausopas:grid-template-rows-ominaisuus

CSS viittausopas:grid-template-ominaisuus

Esimerkki

Esimerkki 1

Luo nelisarakkeinen ruudukkoontti:

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

Kokeile itse

Esimerkki 2

Luo nelisarakkeinen ruudukkoasento ja määritä jokaisen sarkeen koko:

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo Kuvaus
none Oletusarvo. Luo sarakkeita tarvittaessa.
auto Sarakkeen koko riippuu konttorin koosta ja sarjessa olevien kohteiden sisällön koosta.
max-content Aseta jokaisen sarkeen koko suurimmän kohteen mukaan.
min-content Aseta jokaisen sarkeen koko pienimmän kohteen mukaan.
length Aseta sarakekoot, käyttämällä laillisia pituusarvoja. Katso:Pituusyksiköt.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Periisi isäntäelementistä tämän ominaisuuden. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: none
Perintä: Ei
Animaation tekijä: Tuki. Katso:Animaatiot.
Versio: CSS Grid Layout Module Level 1
JavaScript-kieli: object.style.gridTemplateColumns="50px 50px 50px"

Selaintuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimesen version, joka täysin tukee tätä ominaisuutta。

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