Tiesto

Tiesto

WFN Üye
Konular
635
Mesajlar
635
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Antalya
Web Sitesi
Var
Alanı
Domain Uzmanı
1/1
Konu sahibi
CSS Grid ile duyarlı kart düzeni yapmak için kartları bir kapsayıcı içine alın ve kapsayıcıya display: grid, grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) ve gap tanımlayın. Böylece tarayıcı, kullanılabilir genişliğe göre sütun sayısını otomatik ayarlar; kartlar dar ekranda alt alta, geniş ekranda ise yan yana yerleşir. Aşağıdaki örnek, ek bir medya sorgusu yazmadan çalışan temel bir düzen oluşturur.

Çalışan temel örnek​


Aşağıdaki HTML kodunda cards sınıfı Grid kapsayıcısı, card sınıfı ise tek tek kartlardır. Örneği bir HTML dosyasına yerleştirip tarayıcıda açtığınızda pencere genişliğini değiştirerek kartların yeniden sıralandığını görebilirsiniz.

HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Duyarlı kart düzeni</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 24px;
      font-family: Arial, sans-serif;
      background: #f3f4f6;
      color: #1f2937;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card {
      padding: 24px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
    }

    .card h2 {
      margin-top: 0;
      font-size: 1.25rem;
    }

    .card p {
      margin-bottom: 0;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <main class="cards">
    <article class="card">
      <h2>HTML</h2>
      <p>Sayfanın yapısını ve içerik hiyerarşisini oluşturur.</p>
    </article>

    <article class="card">
      <h2>CSS</h2>
      <p>Renk, boşluk, hizalama ve duyarlı görünümü kontrol eder.</p>
    </article>

    <article class="card">
      <h2>JavaScript</h2>
      <p>Etkileşim ve dinamik davranış eklemek için kullanılır.</p>
    </article>
  </main>
</body>
</html>

Grid tanımının nasıl çalıştığı​


Örneğin temel satırı şudur:

CSS: 
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

Buradaki repeat() aynı sütun kuralını gerektiği kadar tekrarlar. auto-fit, kapsayıcıya sığan sütun sayısını kullanılabilir alana göre belirler. minmax(240px, 1fr) ise her kartın en az 240 piksel genişliğinde olmasını, daha fazla alan varsa sütunların bu alanı paylaşmasını sağlar.

Örneğin kapsayıcı genişliği üç adet 240 piksellik kartı ve aralarındaki boşlukları karşılıyorsa üç sütun oluşabilir. Pencere daraldığında üç sütun sığmaz; Grid önce iki, sonra tek sütuna geçer. Bu geçiş, belirli cihaz genişlikleri için ayrı ayrı medya sorguları yazmadan gerçekleşir.

gap: 20px kartlar arasındaki yatay ve dikey boşluğu belirler. Kartların dış kenarlara yapışmaması için kapsayıcıya ayrıca iç boşluk vermek veya body üzerinde boşluk bırakmak gerekir. Örnekte bu görev body üzerindeki padding ile yapılmıştır.

Kartların minimum genişliğini belirleme​


240px değeri, tek bir kartın daralmasına izin verilen en küçük genişliktir. Kart içeriğiniz daha uzunsa bu değeri artırabilirsiniz:

CSS: 
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

Daha küçük bir değer daha fazla sütunun sığmasına izin verir; ancak kart metni sıkışabilir. Daha büyük bir değer kartların okunabilirliğini artırır, fakat aynı genişlikte daha az kart yan yana görünür. Bu nedenle değeri, kart başlıklarının uzunluğuna, görsel kullanımına ve hedeflediğiniz en küçük ekran genişliğine göre seçin.

Kart yüksekliğini ve içeriği düzenleme​


Aynı satırdaki Grid öğeleri varsayılan olarak en yüksek kart kadar uzayabilir. Kartların içeriği farklı uzunlukta olsa bile düğmelerin alt hizaya yakın durmasını istiyorsanız kartı dikey bir Flex kapsayıcısına çevirebilirsiniz:

CSS: 
.card {
  display: flex;
  flex-direction: column;
}

.card a {
  margin-top: auto;
}

Bu kullanımda kart içindeki bağlantı veya düğme, kalan boşluğu üstte bırakarak kartın altına itilir. Ancak kartların aynı yüksekliğe sahip olması, içeriklerin aynı uzunlukta olduğu anlamına gelmez; yalnızca yerleşim alanının hizalandığını gösterir. Çok uzun başlıklar veya farklı görsel oranları için ayrıca içerik sınırlarını tasarlamanız gerekir.

Görseller kullanıyorsanız taşmayı önlemek için görseli kart genişliğine uydurun:

CSS: 
.card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

object-fit: cover, görselin kutuyu doldurmasını sağlar; bunun karşılığında görselin kenarlarından bir bölüm kırpılabilir. Görselin tamamının görünmesi gerekiyorsa contain kullanabilirsiniz; bu durumda kutu içinde boş alan kalabilir.

Ne zaman medya sorgusu eklenir?​


auto-fit çoğu standart kart listesi için yeterlidir. Ancak belirli bir ekran genişliğinde kartların davranışını kesin olarak değiştirmek istiyorsanız medya sorgusu ekleyebilirsiniz. Örneğin çok küçük ekranlarda kartların minimum genişliğini azaltabilirsiniz:

CSS: 
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

@media (max-width: 480px) {
  body {
    padding: 16px;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

Bu sorgu, 480 piksel ve daha dar alanlarda tek sütun kullanılmasını zorunlu kılar. Fakat Grid zaten tek sütuna geçebiliyorsa bu medya sorgusu gerekli değildir. Medya sorgusunu yalnızca tasarım kararınız otomatik yerleşimden farklı olduğunda ekleyin.

Yaygın hataları kontrol etme​


Kartlar beklenenden dar görünüyorsa önce minmax() içindeki minimum değeri kontrol edin. Çok büyük bir değer, kapsayıcıya daha az sütun sığmasına neden olur. Kartlar yatay taşma oluşturuyorsa kart veya içindeki uzun metin için sabit genişlik tanımlanıp tanımlanmadığını inceleyin; kartların width: 400px gibi sabit bir genişliğe zorlanması duyarlı yerleşimi bozabilir.

Görsel veya kod gibi uzun içerikler karttan taşıyorsa ilgili içeriğin taşma davranışını ayrıca düzenleyin. Özellikle uzun kod satırlarında kartın genişliğini artırmak yerine yatay kaydırma kullanmak daha uygundur:

CSS: 
.card pre {
  max-width: 100%;
  overflow-x: auto;
}

Tarayıcı penceresini geniş ve dar konumlarda açarak sütun sayısını, kartlar arasındaki boşluğu ve metin taşmasını kontrol edin. Geniş ekranda kartlar gereğinden fazla büyüyorsa max-width ile kapsayıcıyı sınırlayın; dar ekranda yatay kaydırma oluşuyorsa sabit genişlikleri kaldırıp minmax() değerini ve içeriğin taşma kurallarını yeniden ayarlayın.

Bu yapı, kartların yerleşimini duyarlı hâle getirir; kartların içeriğini otomatik olarak kısaltmaz, görselleri kendiliğinden optimize etmez ve erişilebilirlik sorunlarını tek başına çözmez. Başlık hiyerarşisi, anlamlı HTML etiketleri, yeterli renk karşıtlığı ve klavye ile kullanılabilir bağlantılar ayrıca düzenlenmelidir.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)