CSS Grid ile Duyarlı Kart Düzeni

CSS Grid ile Duyarlı Kart Düzeni hakkında dağınık bilgiler yerine derli toplu bir kaynak arıyorsanız doğru yerdesiniz. Bu ders 4 temel noktayı ve bunları bir araya getiren CSS örneğini sade bir dille açıklıyor.

Temel kavram ve amaç

Konunun özünde şu başlıklar yer alıyor: auto-fill ve minmax, fr birimi, gap ve Grid ve Flexbox birlikte. Her biri tek başına küçük bir adım gibi görünse de birlikte uygulandıklarında sağlam bir temel oluştururlar.

4 adımda CSS Grid ile Duyarlı Kart Düzeni

1. auto-fill ve minmax

Sütun sayısı ekran genişliğine göre medya sorgusu yazmadan kendiliğinden değişir.

2. fr birimi

Kalan alan sütunlar arasında eşit paylaştırılır.

3. gap

Kartlar arası boşluk kenar boşluğu hesabı gerektirmeden verilir.

4. Grid ve Flexbox birlikte

Dış düzeni Grid, kartın iç düzenini Flexbox kurar.

Örnek kod

Anlatılanları tek bir yerde görmek için şu CSS örneğini inceleyin:

.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.kart {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  padding: 1.25rem;
}

Örnek bilinçli olarak kısa tutuldu; gerçek projede hata yönetimi ve günlükleme gibi katmanlar eklenmelidir.

Size ne kazandırır?

Kısaca özetlemek gerekirse:

• Bakımı kolay ve okunur bir kod tabanı sağlar
• Farklı cihaz ve tarayıcılarda tutarlı sonuç verir
• Ekip içinde ortak bir uygulama standardı oluşturur
• Sayfa performansını ve kullanıcı deneyimini iyileştirir

Kontrol listesi

Dersi bitirmeden önce aşağıdaki maddeleri kendi projenizde denediğinizden emin olun:

• auto-fill ve minmax
• fr birimi
• gap
• Grid ve Flexbox birlikte

Sonuç

CSS Grid ile Duyarlı Kart Düzeni konusunda ele aldığımız 4 nokta, günlük çalışmada en sık ihtiyaç duyulan kısmı kapsıyor. Özellikle auto-fill ve minmax ve Grid ve Flexbox birlikte başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• HTML5 & Semantik Yapı
• Core PHP (PDO) & MySQL Veritabanı Mimarisi
• JavaScript (ES6+) ve DOM Manipülasyonu

Bir sonraki adım için Akademi sayfasındaki diğer derslere geçebilirsiniz.