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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Responsive Grid</title> <link rel="stylesheet" href="main.css" /> </head> <body> <div class="container"> <div class="el1">Element 1</div> <div class="el2">Element 2</div> <div class="el3">Element 3</div> <div class="el4">Element 4</div> <div class="el5">Element 5</div> <div class="el6">Element 6</div> </div> </body> </html> |
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.
1 2 3 4 5 6 7 |
.container { margin: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 sütun */ grid-template-rows: 5rem 5rem; /* 2 satır, her biri 5rem yüksekliğinde */ gap: 10px; /* Elemanlar arasında boşluk */ } |
Her bir eleman için arka plan renkleri tanımladık:
1 2 3 4 5 6 |
.el1 { background: rgba(255, 154, 72, 0.5); } .el2 { background: rgba(255, 0, 0, 0.5); } .el3 { background: rgba(0, 128, 0, 0.5); } .el4 { background: rgba(0, 4, 255, 0.5); } .el5 { background: rgba(197, 49, 113, 0.5); } .el6 { background: rgba(178, 185, 41, 0.5); } |
Adım 3: Metinleri Ortalamak
Eleman içindeki metinleri yatay ve dikey olarak ortalamak için flexbox kullanıyoruz:
1 2 3 4 5 6 |
.container div { display: flex; justify-content: center; /* Yatayda ortala */ align-items: center; /* Dikeyde ortala */ text-align: center; /* Metin hizalaması */ } |
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:
1 2 3 4 5 6 |
@media (max-width: 768px) { .container { grid-template-columns: 1fr 1fr; /* 2 sütun */ grid-auto-rows: 6rem; /* Satır yüksekliği */ } } |
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:
1 2 3 4 5 6 |
@media (max-width: 480px) { .container { grid-template-columns: 1fr; /* 1 sütun */ grid-auto-rows: 8rem; /* Satır yüksekliği */ } } |
Tam CSS Kodu
Tüm değişiklikleri birleştirerek tam CSS kodumuz şu hale geliyor:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>CSS Course</title> <link rel="stylesheet" href="main.css" /> </head> <body> <div class="container"> <div class="el1">Element 1</div> <div class="el2">Element 2</div> <div class="el3">Element 3</div> <div class="el4">Element 4</div> <div class="el5">Element 5</div> <div class="el6">Element 6</div> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.container { margin: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 5rem 5rem; gap: 10px; } .container div { display: flex; justify-content: center; align-items: center; text-align: center; } .el1 { background: rgba(255, 154, 72, 0.5); } .el2 { background: rgba(255, 0, 0, 0.5); } .el3 { background: rgba(0, 128, 0, 0.5); } .el4 { background: rgba(0, 4, 255, 0.5); } .el5 { background: rgba(197, 49, 113, 0.5); } .el6 { background: rgba(178, 185, 41, 0.5); } @media (max-width: 768px) { .container { grid-template-columns: 1fr 1fr; grid-auto-rows: 6rem; } } @media (max-width: 480px) { .container { grid-template-columns: 1fr; grid-auto-rows: 8rem; } } |
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! 🚀
İlk Yorumu Siz Yapın