- Katılım
- 19 Ocak 2024
- Mesajlar
- 160
- Tepkime puanı
- 11
- Puanları
- 18
- Ödüller
- 6
CSS Grid ile Responsive Düzenler
CSS Grid, modern web tasarımlarında esnek ve düzenli bir yapı oluşturmanın en güçlü araçlarından biridir. Grid sistemi ile responsive (duyarlı) düzenler kolayca oluşturulabilir. İşte örneklerle CSS Grid kullanımı.
Temel Grid Düzeni
Bir sayfanın grid yapısını oluşturmak için `display: grid;` özelliği kullanılır.
CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.grid-item {
background-color: #007BFF;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}HTML Yapısı:
HTML:
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>Bu örnek, 3 sütundan oluşan bir grid düzeni oluşturur.
Responsive Grid Düzeni
Grid sistemi, media query ile birlikte kullanıldığında tamamen responsive hale gelir.
CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}Bu düzen, sütunların boyutunu cihazın genişliğine göre otomatik olarak ayarlar.
Grid ile Karmaşık Düzenler Oluşturma
Grid sistemi, daha karmaşık düzenler için de kullanılabilir. Örneğin, bir başlık ve içerik düzeni:
CSS:
.complex-grid {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: auto;
gap: 10px;
}
.header {
grid-area: header;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #f4f4f4;
padding: 10px;
}
.main {
grid-area: main;
background-color: #ffffff;
padding: 10px;
}
.footer {
grid-area: footer;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}HTML Yapısı:
HTML:
<div class="complex-grid">
<div class="header">Başlık</div>
<div class="sidebar">Kenar Çubuğu</div>
<div class="main">Ana İçerik</div>
<div class="footer">Alt Bilgi</div>
</div>Kullanım Alanları
- Blog veya haber sitelerindeki içerik düzenlemeleri
- E-ticaret ürün sayfaları
- Portföy projelerinde düzenli bir yapı
Son Öneriler
CSS Grid ile tasarım yaparken esnekliği artırmak için `auto-fit` ve `minmax()` özelliklerini kullanın. Grid sistemi, modern web tasarımlarında düzen oluşturmanın en hızlı ve etkili yollarından biridir.
