CSS Grid kartlarında uzun metin taşmasını düzeltme

0cevap 1okunma

Yapay zekâ özeti

CSS Grid kartlarında uzun metinler, grid öğelerinin içeriklerinin minimum genişliğini koruması nedeniyle sütunların genişlemesine ve yatay taşmaya yol açabilir. Çözüm olarak `minmax(min(100%, 18rem), 1fr)`, kartlarda `min-width: 0` ve uzun metinler için `overflow-wrap: anywhere` kullanılması öneriliyor; yalnızca `overflow: hidden` ile içeriği gizlemek yerine neden düzeltilmeli. Farklı ekran genişliklerinde, uzun URL veya başlıklarla test yapılması ve sorun sürerse üst grid ya da flex kapsayıcılarının da incelenmesi gerektiği belirtiliyor.

Üye

0 Puan0 / 300 Puan · Sonraki: Demir 2

🏅 İlk Adım🏅 Konu Ustası

03 Kasım 2026, 08:49

Sorun: Kart genişliği neden bozuluyor?

CSS Grid ile oluşturulan kartlarda uzun kullanıcı adı, oyun başlığı veya URL bulunduğunda sütun beklenenden genişleyebilir. Bunun nedeni, grid öğelerinin varsayılan olarak içeriklerinin minimum genişliğini korumaya çalışmasıdır.

Aşağıdaki örnekte kartlar dar ekranlarda taşmadan alt satıra geçer:


<div class="cards">
  <article class="card">
    <h2>Çok uzun bir oyun başlığı burada taşma yapabilir</h2>
    <p>Bu açıklama kartın kullanılabilir alanına göre satırlara bölünür.</p>
  </article>

  <article class="card">
    <h2>Başka bir kart</h2>
    <p>İçerik uzun olsa bile sayfa yatay kaydırılmaz.</p>
  </article>
</div>


.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #d9d9d9;
  border-radius: .5rem;
  overflow-wrap: anywhere;
}

.card h2,
.card p {
  margin: 0;
}

.card p {
  margin-top: .5rem;
}

Kritik iki düzeltme

```
minmax(min(100%, 18rem), 1fr)
```
, sütunun küçük ekranlarda kapsayıcıdan geniş olmasını engeller.
```
18rem
```
yalnızca örnek bir alt genişliktir; tasarıma göre değiştirilebilir.
```
min-width: 0
```
, grid öğesinin içerik uzunluğu yüzünden sütunu zorla büyütmesini engeller.
```
overflow-wrap: anywhere
```
, boşluksuz uzun metinlerin veya URL benzeri değerlerin kart dışına taşmasını önler.

Sadece

overflow: hidden

eklemek yerine önce grid öğesinin neden büyüdüğünü düzeltmek daha sağlıklıdır. Taşan içeriği tamamen gizlemek, kullanıcı açısından önemli metni görünmez hâle getirebilir.

Kontrol ve test adımları

Tarayıcı geliştirici araçlarında ekran genişliğini 320 piksele kadar düşürün. Kartların yatay kaydırma oluşturmadan tek sütuna inmesini kontrol edin. Ardından şu üç içerikle test yapın:

Boşluksuz uzun bir kullanıcı adı veya URL.
Birden fazla satıra yayılan uzun bir başlık.
Normal uzunlukta kısa bir açıklama.

Sayfada yatay kaydırma oluşuyorsa yalnızca karta değil, üst kapsayıcılara da bakın. Özellikle başka bir grid veya flex öğesinde

min-width: auto

varsayılanı aynı sorunu yeniden üretebilir. Test sırasında geliştirici araçlarının “Layout” bölümünden gerçek grid sütun genişliklerini incelemek, sorunun hangi kapsayıcıdan kaynaklandığını bulmayı kolaylaştırır.

[b]Sorun: Kart genişliği neden bozuluyor?[/b]

CSS Grid ile oluşturulan kartlarda uzun kullanıcı adı, oyun başlığı veya URL bulunduğunda sütun beklenenden genişleyebilir. Bunun nedeni, grid öğelerinin varsayılan olarak içeriklerinin minimum genişliğini korumaya çalışmasıdır.

Aşağıdaki örnekte kartlar dar ekranlarda taşmadan alt satıra geçer:

[code]
<div class="cards">
  <article class="card">
    <h2>Çok uzun bir oyun başlığı burada taşma yapabilir</h2>
    <p>Bu açıklama kartın kullanılabilir alanına göre satırlara bölünür.</p>
  </article>

<article class="card">
    <h2>Başka bir kart</h2>
    <p>İçerik uzun olsa bile sayfa yatay kaydırılmaz.</p>
  </article>
</div>
[/code]

[code]
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

.card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #d9d9d9;
  border-radius: .5rem;
  overflow-wrap: anywhere;
}

.card h2,
.card p {
  margin: 0;
}

.card p {
  margin-top: .5rem;
}
[/code]

[b]Kritik iki düzeltme[/b]

[list]
[*] [code]minmax(min(100%, 18rem), 1fr)[/code], sütunun küçük ekranlarda kapsayıcıdan geniş olmasını engeller. [code]18rem[/code] yalnızca örnek bir alt genişliktir; tasarıma göre değiştirilebilir.
[*] [code]min-width: 0[/code], grid öğesinin içerik uzunluğu yüzünden sütunu zorla büyütmesini engeller.
[*] [code]overflow-wrap: anywhere[/code], boşluksuz uzun metinlerin veya URL benzeri değerlerin kart dışına taşmasını önler.
[/list]

Sadece [code]overflow: hidden[/code] eklemek yerine önce grid öğesinin neden büyüdüğünü düzeltmek daha sağlıklıdır. Taşan içeriği tamamen gizlemek, kullanıcı açısından önemli metni görünmez hâle getirebilir.

[b]Kontrol ve test adımları[/b]

Tarayıcı geliştirici araçlarında ekran genişliğini 320 piksele kadar düşürün. Kartların yatay kaydırma oluşturmadan tek sütuna inmesini kontrol edin. Ardından şu üç içerikle test yapın:

[list]
[*] Boşluksuz uzun bir kullanıcı adı veya URL.
[*] Birden fazla satıra yayılan uzun bir başlık.
[*] Normal uzunlukta kısa bir açıklama.
[/list]

Sayfada yatay kaydırma oluşuyorsa yalnızca karta değil, üst kapsayıcılara da bakın. Özellikle başka bir grid veya flex öğesinde [code]min-width: auto[/code] varsayılanı aynı sorunu yeniden üretebilir. Test sırasında geliştirici araçlarının “Layout” bölümünden gerçek grid sütun genişliklerini incelemek, sorunun hangi kapsayıcıdan kaynaklandığını bulmayı kolaylaştırır.

Cevaplar (0)

Bu konuya henüz yanıt yazılmamış. İlk yanıtı siz yazın!

Şu An Bu Konuyu Okuyanlar

Toplam: 1

+ 1 Ziyaretçi

Topluluğa katılın

Yanıt yazmak için giriş yapın veya hesap oluşturun.

Bu konuya yanıt verebilmek için üye hesabınızla devam edin. Hesabınız yoksa birkaç adımda kayıt olabilirsiniz.

Giriş Yap Kayıt Ol

0 alıntı seçildi