Использование решетчатой ​​основы 4 сетки для создания элементов списка элементов

Question

Система сетки Foundation 4 с ее мобильным первым подходом не имеет никакого смысла, когда дело доходит до стилизации макета страницы, когда вы уже используете другие элементы фундамента (будь то текстовое содержимое , общий макет изображений/содержимого на странице, например, основной контент и боковые панели).

В следующем примере страницы, каждый серый прямоугольник производится с помощью сеток и вложенных сеток:

Я часто ловлю себя на проектирование «табличных данных», который состоит из элементов и подэлементов (например, отдельные серые коробки в центре предыдущего изображения), которые выглядят немного как это:

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

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

Итак, мой вопрос: используете ли вы сетку фундамента для этих деталей в дизайне, а если нет, то какой ваш любимый способ получить несколько элементов в одной строке с разными выравниваниями и иметь определенные элементы, соответствующие друг другу другие (простые divs с hardcoded width? display: table? something else?).

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

Answer 1

Похоже, что использовать Foundation grid mixins (как описано в нижней части страницы).

Это дает вам лучшее из обоих миров: простота использования сетки фундамента, позволяя точно настраивать поведение сетки (пространство между столбцами и т. Д.), Которые могут быть разными для каждого элемента, который вы используете ,

Еще одно преимущество заключается в том, что вам не нужны презентационные классы. Вместо того, чтобы писать что-то вроде

<div class="row"> 
    <div class="large-12 columns"> 
     <div class="myItem">My Item</div> 
    </div> 
</div> 

Вы можете пойти с

<div class="myItemWrapper"> 
    <div class="myItem">My Item</div 
</div> 

Хотя, имея в своем style.css.scss как

коснуться

@import 'foundation_and_overrides'; 
.myItemWrapper {@include grid-row(nest-collapse);} 
.market_label {@include grid-column($columns: 12);}