Исправлена ширина столбцов, количество столбцов/строк в зависимости от ширины экрана

Используя Bootstrap 3, я ищу схему сетки, где ширина столбцов была зафиксирована на любом разрешении экрана (допустим, 200 пикселей), но их количество зависело от ширины экрана.

Другими словами, я знаю ширину столбцов, но я не знаю, сколько столбцов у меня будет на строки, потому что это будет зависеть от ширины экрана. Затем поля между ячейками также будут зависеть от ширины экрана.

Когда экран имеет большую ширину, должно быть много столбцов, но несколько строк:

______________________________________________________________
| ___________ ___________ ___________ ___________ |
| | | | | | | | | |
| | #1 | | #2 | | #3 | | #4 | |
| |<- 200px ->| |<- 200px ->| |<- 200px ->| |<- 200px ->| |
| | | | | | | | | |
| |___________| |___________| |___________| |___________| |
| ___________ |
| | | |
| | #5 | |
| |<- 200px ->| |
| | | |
| |___________| |
|______________________________________________________________|

Когда экран имеет небольшую ширину, должно быть несколько столбцов, но много строк.

________________________________
 | ___________ ___________ |
 | | | | | |
 | | #1 | | #2 | |
 | |<- 200px ->| |<- 200px ->| |
 | | | | | |
 | |___________| |___________| |
 | ___________ ___________ |
 | | | | | |
 | | #3 | | #4 | |
 | |<- 200px ->| |<- 200px ->| |
 | | | | | |
 | |___________| |___________| |
 | ___________ |
 | | | |
 | | #5 | |
 | |<- 200px ->| |
 | | | |
 | |___________| |
 |________________________________|

Каковы решения?

Я попробовал систему сетки Bootstrap, но вам все равно нужно указать количество столбцов на строку (или я не получил, как ее использовать).

1 ответ

сетчатые системы предназначены для создания реагирующих разделов и перекладывания их друг на друга, но то, что вы ищете, не реагирует, ваши элементы фиксированы. Я думаю, вы можете сделать это легко с простым стилем. например, поместите все ваши элементы в один столбец с полной шириной, а затем создайте их.

div{
 width:100px;
 height:100px;
 background:#aaa;
 margin:15px;
 float:left;
}

здесь ДЕМО.

licensed under cc by-sa 3.0 with attribution.