CSS Grid: satırlar ve sütunlarla düzen kurmak

Kısaca: CSS Grid öğeleri iki boyutlu bir satır ve sütun ızgarasına yerleştirir; tüm sayfa düzenleri için idealdir, Flexbox ise tek tek alanlardaki satırlara veya sütunlara uygundur.

Biraz daha ayrıntılı: display: grid ile bir kapsayıcı ızgara olur. Sütunları ve satırları tanımlarsın; çocuklar hücreleri otomatik doldurur veya bilerek yerleştirilir.

Ayrıntılı

Temeller

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

fr, boş alanın bir kesridir. gap hücreler arasındaki boşluğu ayarlar. grid-column: 1 / 3 ile bir öğe iki sütunu kaplar; grid-template-areas adlandırılmış alanlara izin verir (“head head”, “side content”).

Medya sorgusu olmadan duyarlı

grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); sığabildiği kadar sütun oluşturur, en az 220 px genişliğinde. Telefonda bir sütun, masaüstünde dört, tek bir kesme noktası olmadan. minmax(), auto-fill/auto-fit ve aspect-ratio temel araçlardır.

Grid mi Flexbox mı?

• Grid: iki boyutlu, dıştan düzen (önce ızgara, içerik doldurur).
• Flexbox: tek boyutlu, içeriden düzen (boyuta içerik karar verir), örneğin gezinme çubukları.
• İkisi birleştirilebilir: sayfa çerçevesi için Grid, hücrelerin içindeki satırlar için Flexbox.
• Subgrid (grid-template-columns: subgrid) çocukların ebeveyn ızgarasının izlerini kullanmasını sağlar; güncel tarayıcılarda mevcuttur.

Hatalardan kaçınmak

• Çok fazla sabit piksel değeri; fr, minmax, % tercih et.
• Sırayı yalnızca görsel olarak yeniden düzenleme: sekme ve ekran okuyucu sırası kaynağı izler.
• İzleri görünür kılmak için tarayıcıların geliştirici araçlarındaki ızgara araçlarını kullan.

Ayrıca bak: Flexbox, Medya sorguları ve kesme noktaları, Tailwind CSS