Giriş
Standart Bootstrap 12'li kolon yapısı (12/8 tam bölünmediği için) 8'li dizilimler için bazen yetersiz kalabilir. Bu gibi durumlarda CSS Grid en temiz ve modern çözümdür.
Canlı Uygulama
Aşağıdaki alan, ekran genişliğinize göre otomatik şekil değiştirir:
Ekranı küçülterek 4'lü yapıyı test edebilirsiniz.
1. CSS Grid Çözümü (Önerilen)
En esnek ve modern yöntemdir. Tek bir kapsayıcı üzerinden tüm responsive kontrolü sağlanır.
/* CSS */
.grid-container {
display: grid;
gap: 15px; /* Nesne aralıkları */
}
/* Masaüstü (Desktop) - 8 Kolon */
@media (min-width: 992px) {
.grid-container {
grid-template-columns: repeat(8, 1fr);
}
}
/* Mobil (Mobile) - 4 Kolon */
@media (max-width: 991px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}
2. Bootstrap / Flexbox Çözümü
Eğer eski tarayıcı desteği gerekiyorsa veya grid kullanmak istemiyorsanız, flexbox ile genişlik yüzdesi vererek ilerleyebilirsiniz.
.flex-item {
float: left;
}
/* Desktop: 100% / 8 = 12.5% */
@media (min-width: 992px) {
.flex-item { width: 12.5%; }
}
/* Mobile: 100% / 4 = 25% */
@media (max-width: 991px) {
.flex-item { width: 25%; }
}
Dikkat Edilmesi Gerekenler
- Hizalama: 8'li dizilimlerde nesnelerin birbirine çok yaklaşmaması için
gap değerini dikkatli seçin.
- İçerik: 8'li dizilim genelde ikonlar veya logolar için idealdir. Metin yoğunluklu içerikler için 8 kolon okunabilirliği düşürebilir.
- Taşma: Mobilde 4'lü dizilimde ekran genişliği yetersiz geliyorsa (ör. 320px ekranlarda), mobil için 2'li dizilime düşülmesi önerilebilir.