CSS ızgara-oto-akış özelliği

Tanım ve kullanım

grid-auto-flow özelliği, otomatik yerleştirilen projelerin ağaca nasıl ekleneceğini kontrol eder.

Ayrıca bkz:

CSS eğitimi:CSS ağaç düzeni

Örnek

Örnek 1

Otomatik yerleştirilen projeleri sütunlar halinde ekleyin:

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

Kendi kendinize deneyin

Örnek 2

Tüm boşlukları doldurmak için "dense" değeri ekleyin:

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

Kendi kendinize deneyin

CSS dilbilgisi

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

Özellik değeri

Değer Açıklama
row Varsayılan değer. Her satıru doldurarak projeleri yerleştirin.
column Her sütunu doldurarak projeleri yerleştirin.
dense Ağaçtaki her boşluğu doldurmak için projeleri yerleştirin.
row dense Her satıru doldurarak projeleri yerleştirin ve ağaçtaki her boşluğu doldurun.
column dense Her sütunu doldurarak projeleri yerleştirin ve ağaçtaki her boşluğu doldurun.

Teknik ayrıntılar

Varsayılan değer: row
Devralma: Hayır
Animasyon yapımı: Destekleniyor. Aşağıdan bakın:Animasyonla ilgili özellikler.
Sürüm: CSS Grid Layout Modülü 1
JavaScript dilbilgisi: object.style.gridAutoFlow="row dense"

Tarayıcı desteği

Tablo içindeki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

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