CSS Grid, web tasarımında sayfa düzenini oluşturmak için kullanılan en güçlü yöntemlerden biridir. Özellikle karmaşık düzenleri oluştururken, eski yöntemler olan float veya flexbox yerine çok daha esnek ve temiz bir yapı sunar.
CSS Grid Nedir?
CSS Grid, iki boyutlu (satır ve sütun) düzen oluşturmayı sağlayan bir CSS modülüdür. Bu sayede bir sayfanın farklı bölümlerini kolayca kontrol edebilir ve modern tasarımlar geliştirebilirsiniz.
Temel Kullanım
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 sütun */
gap: 20px; /* elemanlar arası boşluk */
}
.item {
background-color: #4CAF50;
color: #fff;
padding: 20px;
text-align: center;
}
Yukarıdaki örnekte, 3 sütunlu bir grid yapısı oluşturduk. 1fr
ifadesi, sütunların eşit şekilde bölünmesini sağlar.
Avantajları
- Karmaşık düzenleri kolayca oluşturma
- Daha temiz ve anlaşılır CSS kodları
- Responsive (mobil uyumlu) tasarımlarda esneklik
- Flexbox ile birlikte kullanıldığında güçlü kombinasyonlar
Responsive Grid Örneği
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
Bu örnekle birlikte, ekran küçüldüğünde grid yapısı otomatik olarak uyum sağlar ve mobil cihazlarda daha iyi bir deneyim sunar.
CSS Grid, modern web tasarımının vazgeçilmez araçlarından biridir. Eğer hâlâ denemediyseniz, küçük projelerle başlayarak bu güçlü özelliği öğrenmeye başlayabilirsiniz.