CSS Grid Düzen Oluşturucu

CSS Grid, iki boyutlu düzenler için güçlü bir araçtır. Gazete düzenlerinden karmaşık panollara kadar Grid her şeyi mümkün kılar.

Grid vs Flexbox

• Grid: 2 boyutlu düzen (satır ve sütunları aynı anda)
• Flexbox: 1 boyutlu düzen (satır veya sütun)
• İkisini birlikte kullanmak en etkili yaklaşımdır

Temel Grid Özellikleri

• grid-template-columns: Sütunları tanımlar (repeat(3, 1fr))
• grid-template-rows: Satırları tanımlar
• gap: Satır/sütun boşluğu
• grid-column/row: Öğenin kapladığı alan

Duyarlı Grid

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Bu desen, medya sorgusu olmadan otomatik olarak duyarlı ızgara oluşturur.