CSS grid-auto-flow 属性

Paglilinang at paggamit

Ang grid-auto-flow katangian ay nagkontrol kung paano idagdag ang awtomatikong maglalagay ng proyekto sa grid.

Pangalawang pagkikita:

Tuturo ng CSS:CSS Grid Layout

Sample

Halimbawa 1

Magdagdag ng awtomatikong maglalagay ng proyekto sa pamamagitan ng kolum:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

Subukan nang personal

Halimbawa 2

Punan ang lahat ng butas sa grid sa pamamagitan ng pagdagdag ng halaga ng "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

Subukan nang personal

Grammar ng CSS

grid-auto-flow: row|column|dense|row dense|column dense;

Halaga ng katangian

Halaga Paglalarawan
row Default na halaga. Ilagay ang mga proyekto sa pamamagitan ng pagpunan ng bawat linya.
column Ilagay ang mga proyekto sa pamamagitan ng pagpunan ng bawat kolum.
dense Ilagay ang mga proyekto upang punan ang anumang butas sa grid.
row dense Ilagay ang mga proyekto sa pamamagitan ng pagpunan ng bawat linya at punan ang anumang butas sa grid.
column dense Ilagay ang mga proyekto sa pamamagitan ng pagpunan ng bawat kolum sa bawat kolum at punan ang anumang butas sa grid.

Detalye ng teknolohiya

Default na halaga: row
Inherits: Hindi
Gawa ng animasyon: Suportado. Tingnan ang:Mga katangian ng animasyon.
Bersyon: CSS Grid Layout Module Level 1
Grammar ng JavaScript: object.style.gridAutoFlow="row dense"

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