Esnek Grid Listeleme

Giriş

Standart Bootstrap 12'li kolon yapısı 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 (8 Kolon -> 4 Kolon):

Ekranı küçülterek responsive yapıyı test edebilirsiniz.

CSS Grid Çözümü

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;
}

@media (min-width: 992px) {
    .grid-container { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 991px) {
    .grid-container { grid-template-columns: repeat(4, 1fr); }
}