CSS ruudukko-automaiset-juoksu ominaisuus

Määritelmä ja käyttö

grid-auto-flow-ominaisuus hallitsee, miten automaattisesti sijoitettavat kohteet lisätään verkkoon.

Katso myös:

CSS-opas:CSS-verkkorakennelma

Esimerkki

Esimerkki 1

Lisää automaattisesti sijoitettavat kohteet sarake kerrallaan:

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

Kokeile itse

Esimerkki 2

Täytä kaikki aukot verkkoon lisäämällä "dense"-arvo:

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

Kokeile itse

CSS-kieli

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

Ominaisuuden arvo

Arvo Kuvaus
row Oletusarvo. Aseta kohteet täyttämällä jokainen rivi.
column Aseta kohteet täyttämällä jokainen sarake.
dense Aseta kohteet täyttämällä kaikki aukot verkkoon.
row dense Aseta kohteet täyttämällä jokainen rivi ja täyttämällä kaikki aukot verkkoon.
column dense Aseta kohteet täyttämällä jokainen sarake ja täyttämällä kaikki aukot verkkoon.

Tekninen yksityiskohta

Oletusarvo: row
Perintä: Ei
Animaatiotuotanto: Tuki. Katso:Animaatiotuotteen ominaisuudet.
Versio: CSS Grid Layout Module Level 1
JavaScript-kieli: object.style.gridAutoFlow="row dense"

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen täysin tukevan selaimen version.

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