Arkadaşlar merhaba, bir süredir kendi projemde kullandığım grid sistemini mobile uyumlu hale getirmeye çalışıyorum ama bir türlü istediğim sonucu alamıyorum. Özellikle 768px altındaki ekranlarda kolonlar birbirine giriyor, bazı elementler taşma yapıyor. Desktop'ta her şey mükemmel görünüyor, 12 kolonluk gridim kusursuz çalışıyor ama iş mobile'a gelince resmen dağılıyor. Media query'lerde bir hata yapıyor olabilir miyim? Yoksa grid-template-areas veya auto-fit/auto-fill kullanımında mı yanlışlık var? Genelde flexbox ile çalışıyordum, ilk defa grid ile bu kadar detaylı bir layout yapıyorum, bu yüzden tecrübeli arkadaşların fikirlerine ihtiyacım var.
Şöyle bir yapı kurdum: ana container'a display: grid ve grid-template-columns: repeat(12, 1fr) verdim. İçerideki elemanları belirli kolon aralıklarına yerleştirdim. Media query olarak da @media (max-width: 768px) içinde grid-template-columns: 1fr yapıyorum, yani tek kolona düşürmeyi hedefliyorum. Fakat burada tüm elemanlar üst üste binip gidiyor, sanki grid gap veya padding hesaplamaları bir yerde patlıyor. Firefox ve Chrome'da farklı sonuçlar alıyorum, hatta bazen Safari'de hiç çalışmıyor. Acaba overflow: hidden eklemek mi lazım yoksa grid'de item'lara verdiğim min-width değerleri mi sıkıntı çıkarıyor? Bu konuda kafa yoran, benzer sorun yaşayan var mı?
Ayrıca şöyle bir detay daha var: bazı grid item'larının içinde resimler var, onlara max-width: 100% ve height: auto vermeme rağmen mobile'da taşma oluyor. Belki de grid item'larının kendisine width: 100% vermem gerekiyor? Ama o zaman desktop'ta grid'in kendi yapısını bozar mı, emin değilim. Sizce media query içinde grid item'larının sınıflarını tek tek mi sıfırlamalıyım, yoksa daha global bir çözüm mü var? Şimdiden teşekkürler, cevaplarınızı merakla bekliyorum.
Şöyle bir yapı kurdum: ana container'a display: grid ve grid-template-columns: repeat(12, 1fr) verdim. İçerideki elemanları belirli kolon aralıklarına yerleştirdim. Media query olarak da @media (max-width: 768px) içinde grid-template-columns: 1fr yapıyorum, yani tek kolona düşürmeyi hedefliyorum. Fakat burada tüm elemanlar üst üste binip gidiyor, sanki grid gap veya padding hesaplamaları bir yerde patlıyor. Firefox ve Chrome'da farklı sonuçlar alıyorum, hatta bazen Safari'de hiç çalışmıyor. Acaba overflow: hidden eklemek mi lazım yoksa grid'de item'lara verdiğim min-width değerleri mi sıkıntı çıkarıyor? Bu konuda kafa yoran, benzer sorun yaşayan var mı?
Ayrıca şöyle bir detay daha var: bazı grid item'larının içinde resimler var, onlara max-width: 100% ve height: auto vermeme rağmen mobile'da taşma oluyor. Belki de grid item'larının kendisine width: 100% vermem gerekiyor? Ama o zaman desktop'ta grid'in kendi yapısını bozar mı, emin değilim. Sizce media query içinde grid item'larının sınıflarını tek tek mi sıfırlamalıyım, yoksa daha global bir çözüm mü var? Şimdiden teşekkürler, cevaplarınızı merakla bekliyorum.