İçeriğe geç

Responsive Grid Tasarımı: Satır ve Sütunları Mobil Uyumlu Hale Getirme

Bir web sitesinde, modern kullanıcı deneyimi için responsive (mobil uyumlu) tasarım kritik bir öneme sahiptir. Bu yazıda, bir grid sistemini nasıl mobil uyumlu hale getireceğimizi ve satır yüksekliğini nasıl ayarlayacağımızı adım adım ele alacağız.

Adım 1: HTML Yapısını Oluşturma

Öncelikle HTML’de bir grid yapısı kuruyoruz. Örneğimizde 6 farklı elemanı bir container içinde düzenledik:

Bu yapı, tüm elemanları bir arada tutacak bir .container sınıfına sahiptir. İçerideki her bir elemanın div olduğunu görebilirsiniz.

Adım 2: CSS ile Grid Yapısı Eklemek

HTML yapımızı bir grid layout ile düzenlemek için CSS’e geçiyoruz. Varsayılan olarak masaüstü görünümünde, 3 sütunlu bir grid oluşturuyoruz.

Her bir eleman için arka plan renkleri tanımladık:

Adım 3: Metinleri Ortalamak

Eleman içindeki metinleri yatay ve dikey olarak ortalamak için flexbox kullanıyoruz:

Bu düzenleme ile metinler tam ortada hizalanacak.

Adım 4: Mobil Uyumluluk İçin Media Query Kullanmak

Farklı ekran boyutlarına göre düzeni uyarlamak için media query ekliyoruz:

Tablet Görünümü (max-width: 768px)

Ekran genişliği 768px’den küçük olduğunda, grid’i 2 sütunlu hale getiriyoruz. Ayrıca satırların yüksekliğini varsayılan olarak 6rem yapıyoruz:

Telefon Görünümü (max-width: 480px)

Telefonlar için grid’i tek sütunlu hale getiriyoruz ve her satırın yüksekliğini 8rem olarak ayarlıyoruz:

Tam CSS Kodu

Tüm değişiklikleri birleştirerek tam CSS kodumuz şu hale geliyor:

Sonuç

Bu adımları takip ederek grid yapınızı mobil uyumlu hale getirdiniz. Artık:

1.Masaüstünde 3 sütunlu bir görünüm,

2.Tabletlerde 2 sütunlu bir görünüm,

3.Telefonlarda ise 1 sütunlu ve 8rem yüksekliğinde bir görünüm elde etmiş oldunuz.

Responsive tasarımda bu teknik, grid sisteminin her ekran boyutunda düzgün görünmesini sağlar. Şimdi bu yapıyı projenizde kullanabilirsiniz! 🚀

Kategori:Css

İlk Yorumu Siz Yapın

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir