Блог

Предположим, у меня около 250 разделов, стилизованных под class slider-item . У меня есть адаптивная сетка в css A , которая обертывает divs в виде столбцов / элементов по мере масштабирования окна. Минимальная ширина элемента 240px указана ниже.

https://streamable.com/l3ezfv

Я пытаюсь сохранить адаптивность сетки в одной строке (nowrap с горизонтальным переполнением). Проблема в том, что свойство grid-template-columns: repeat(auto-fill..) увеличивает / сжимает строки, потому что divs превышают текущую ширину окна

A

 .slider-content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
  overflow: hidden;
  margin: 20px 0;
  scroll-behavior: smooth;
} 

/* .slider-content > .slider-item {
  min-height: 130px;
  min-width: 240px;
} */
  

B

 .slider-content {
display:grid;   
grid-auto-flow:column;  
grid-gap:10px; 
margin:20px 0;
overflow:auto;
}

.slider-content > .slider-item {
  min-height: 130px;
  min-width: 240px;
}
  

Css B хранит содержимое в одной строке с горизонтальной прокруткой, но проблема в том, что оно не реагирует, как css A

Мне это понадобится позже для карусели с несколькими столбцами.

Не интересует flexbox или slickjs; с использованием css grid.

Я думаю, это достигает того, чего вы хотите:

 .slider-content {
    display: grid;
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 1fr);
}
  

И не забудьте установить высоту для любого .slider-content или .slider-item .

Обновить

Я не знаю, как отключить перенос строк CSS-сетки. Но я нашел способ, который работает как на видео, но в одной строке с переполнением. Это не самый элегантный способ, но работает просто отлично. Я не добавлял все медиа-запросы до 6 столбцов, но их очень легко добавить — просто увеличьте размер носителя до 240 пикселей или какой бы вы ни хотели, чтобы минимальная ширина была, и измените grid-auto-columns значение.

 .slider-content {
    /* Same as above, before update. */
}

@media (max-width: 479px) {
    .slider-content {
        grid-auto-columns: 100%;
    }
}

@media (min-width: 480px) and (max-width: 719px) {
    .slider-content {
        grid-auto-columns: 50%;
    }
}

@media (min-width: 720px) and (max-width: 959px) {
    .slider-content {
        grid-auto-columns: 33.3%;
    }
}