CSS grid-auto-columns 属性

Definisyon at Paggamit

Ang katangian ng grid-auto-columns ay nagtatakda ng sukat ng kolumna sa grid container.

Ang katangian na ito ay makakaapekto lamang sa mga kolumna na hindi nai-set ang sukat.

Tingnan din:

Tuturo ng CSS:CSS Grid Layout

Manwal ng CSS:grid-auto-rows katangian

Mga Halimbawa

Iset ang default na sukat ng kolumna para sa grid:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

Subukan Ng Mga Sarili

Mga Tagapagsanay ng CSS

grid-auto-columns: auto|max-content|min-content|length;

Halaga ng katangian

Halaga Paglalarawan
auto Default na halaga. Ang sukat ng kolumna ay pinapagpasyahan ng sukat ng container.
fit-content()
max-content Iset ang sukat ng bawat kolumna ayon sa pinakamalaki na proyekto sa kolumna.
min-content Iset ang sukat ng bawat kolumna ayon sa pinakamaliit na proyekto sa kolumna.
minmax(min.max) Iset ang sukat na mas malaki o katumbas ng min at mas mababa o katumbas ng max.
length Iset ang sukat ng kolumna, sa pamamagitan ng paggamit ng lehitimong halaga ng sukat. Tingnan:Mga yunit ng sukat。
% Iset ang sukat ng kolumna, sa pamamagitan ng paggamit ng porsyento ng halaga.

Detalye ng Teknolohiya

Default na halaga: auto
Inherisyon: Hindi
Gawain ng animasyon: Suportado. Tingnan ang:Mga katangian ng animasyon。
Bersyon: CSS Grid Layout Module Level 1
Mga Tagapagsanay ng JavaScript: object.style.gridAutoColumns="120px"

Suporta ng Browser

Ang mga numero sa talahanayan ay nagtatalaga ng unang bersyon ng browser na ganap na sumusuporta sa katangian na iyon.

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