Создайте сетки с произвольными столбцами в разных адаптивных макетах

Question

У меня есть приложение Rails, которое я создаю с помощью Foundation. У меня возникли проблемы с выяснением того, как отображать произвольное количество столбцов в строке и сохранять их отзывчивыми в малогабаритных/средних/больших макетах.

Например, скажем, у меня есть модель Department, которая имеет множество Employees. Я пытаюсь создать страницу отдела и отобразить список сотрудников в отделе. Один отдел может иметь 10 сотрудников. У другого может быть 6. Это произвольно.

Я хочу сделать 4 колонки в large, 2 колонках в medium и 1 колонке в small. (См. Мой каркас ниже). Однако столбцы необходимо обернуть в div.row. Это требование означает, что у меня есть одно из следующих двух ситуаций:

• Дело № 1 (jsfiddle) У меня 2 элементов на строке и large расположение получает только 2 элемента, потому что он становится очищен от .row.
• Дело № 2 (jsfiddle) У меня есть 4 элемента в строке, и столбцы неправильно очищаются, если в раскладке 2-столбца, medium, потому что есть 4 строки.

Похоже, что это должно быть довольно стандартная ситуация, но я не могу понять, как это понять. Как мне это сделать? Является ли Фонд неправильным инструментом?

Answer 1

СМИ Вопросы и CSS может сделать трюк:

// medium 
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
    .row > div:nth-child(2) {clear: left;} 
} 

С 4-х элементов в строке

http://quirksmode.org/css/selectors/nthchild.html http://foundation.zurb.com/docs/media-queries.html