CSS Grid açıklaması

Sık kullanılan tüm CSS grid özellikleri, uygulandıkları yere göre gruplandırılmış: kapsayıcı, öğe ve boyutlandırma birimleri. Her satır özelliği yaygın değerleriyle eşleştirir.

Grid, öğeleri iki boyutta dizer: satırlar ve sütunlar aynı anda. Ebeveyne display: grid verin, izleri grid-template-columns ve grid-template-rows ile tanımlayın, çocukları hücrelere yerleştirin. Sayfa ve kart düzenleri için grid'i, tek boyutlu çubuklar için flexbox'ı kullanın. İkisi serbestçe birleşir.

Referans tablosu · 33 kayıt

33 of 33 rows


Kapsayıcı
	grid \| inline-grid	Öğeyi bir grid kapsayıcısına dönüştürür.
	1fr 1fr \| repeat(3, 1fr) \| 200px 1fr	Sütunları ve genişliklerini tanımlar.
	auto 1fr auto	Satırları ve yüksekliklerini tanımlar.
	[main-start] 1fr [main-end]	Bir şablonda grid çizgilerini adlandırır ve öğeleri bu adlara göre yerleştirir.
	1rem \| 8px 16px	Satırlar ve sütunlar arasındaki boşluk.
	"header header" "nav main"	Okunabilir yerleştirme için hücrelere ad verir.
	"head head" 64px "nav main" 1fr / 200px 1fr	Satırları, sütunları ve alanları tek bir kısaltmada ayarlar.
	repeat(2, 1fr) / auto-flow 80px	Tüm iz özelliklerini ve grid-auto-flow'u tek bildirimde ayarlar.
	minmax(80px, auto)	Şablonun tanımlamadığı satırların yüksekliğini ayarlar.
	120px \| minmax(0, 1fr)	Şablonun tanımlamadığı sütunların genişliğini ayarlar.
	row \| column \| row dense	Yerleştirilmemiş öğeler için ekseni seçer; dense önceki boşlukları geri doldurur.
	start \| center \| end \| stretch	Her öğeyi hücresi içinde satır ekseninde hizalar.
	start \| center \| end \| stretch	Her öğeyi hücresi içinde sütun ekseninde hizalar.
	center \| start end	align-items ve justify-items'i tek bildirimde ayarlar.
	start \| center \| space-between	İz gridini kapsayıcı içinde satır ekseninde hizalar.
	start \| center \| space-between	İz gridini kapsayıcı içinde sütun ekseninde hizalar.
	center \| end start	align-content ve justify-content'i tek bildirimde ayarlar.
Öğe
	1 / 3 \| span 2	Öğeyi sütunlar üzerinde konumlandırır veya birden çok sütuna yayar.
	1 / 2 \| span 3	Öğeyi satırlar üzerinde konumlandırır veya birden çok satıra yayar.
	grid-column: 2 / -1	Çizgileri grid'in sonundan sayar; -1 son çizgidir.
	header \| 1 / 1 / 2 / 3	Öğeyi tek bir kısaltmayla adlandırır veya tam olarak konumlandırır.
	start \| center \| end \| stretch	Yalnızca bu öğeyi hücresi içinde satır ekseninde hizalar.
	start \| center \| end \| stretch	Yalnızca bu öğeyi hücresi içinde sütun ekseninde hizalar.
	center \| start end	align-self ve justify-self'i tek bildirimde ayarlar.
Boyutlandırma birimleri
	1fr \| 2fr	İzdeki boş alanın bir kesri.
	auto \| 1fr auto	İzi içeriğine göre boyutlandırır; hizalama onu gerilebilir.
	min-content \| max-content	İzi en küçük veya en büyük içeriğine göre boyutlandırır.
	fit-content(180px)	İzi içeriğine göre boyutlandırır ama verilen sınırı geçirmez.
	minmax(200px, 1fr)	Bir izi en küçük ve en büyük değerler arasında sınırlar.
	repeat(4, 1fr)	Bir iz örüntüsünü her birini tek tek yazmadan yineler.
	repeat(auto-fit, minmax(120px, 1fr))	Sığan kadar iz ekler; auto-fit boş izleri çökertir.
	grid-template-columns: subgrid	İç içe geçmiş grid'in ebeveynin izlerini ve çizgi adlarını paylaşmasını sağlar.
	grid-template-rows: masonry	Deneysel: öğeleri sabit satırlar yerine yüksekliğe göre sütunlara dizer.