Как сделать бесконечное кол-во колонок без переноса, но с заданным размером?
Как сделать бесконечное кол-во колонок без переноса, но с заданным размером? (от 100px до 200px) (на css grid)
https://jsbin.com/cusopuzizu/edit?html,css,output
.container { border: 1px solid red; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 200px)); grid-auto-flow: column; overflow-x: scroll; } .item { border: 1px solid gray; background-color: papayawhip; } |
.container { border: 1px solid red; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 200px)); grid-auto-flow: column; overflow-x: scroll; } .item { border: 1px solid gray; background-color: papayawhip; }
Дополнительно:
Ответы:
Зафиксировать минимальную ширину
.item { border: 1px solid gray; background-color: papayawhip; min-width:100px; } |
.item { border: 1px solid gray; background-color: papayawhip; min-width:100px; }
Пока колонки помещаются в контейнер, они будут растягиваться до 200. Потом ужиматься до 100.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания бесконечного количества колонок без переноса, но с заданным размером, можно использовать CSS свойство `flex`. Flexbox позволяет легко управлять расположением элементов в контейнере.
Пример решения данной задачи с использованием flexbox в CSS:
```html
.container {
display: flex;
flex-wrap: nowrap; /* Запретить перенос элементов */
}
.column {
flex: 0 0 200px; /* Задать размер каждой колонки */
margin: 10px;
background-color: lightblue;
text-align: center;
padding: 10px;
}
```
В данном примере создается контейнер с классом `container`, который использует flexbox для распределения дочерних элементов без переноса. Каждая колонка имеет класс `column` и задается свойство `flex: 0 0 200px;`, которое определяет размер колонки в 200 пикселей без возможности изменения. Можно добавлять сколько угодно колонок, и они будут автоматически выстраиваться горизонтально.
Таким образом, используя flexbox в CSS, можно легко создать бесконечное количество колонок без переноса, но с заданным размером.