使用zurb foundation 4网格系统设计列表元素

Question

基础4的网格系统，当你已经使用其他基础元素（无论是文本内容，图像/内容的总体布局）时，它的移动第一种方法在设计页面布局时毫无疑问。主页内容和侧边栏等页面。

在以下示例页面中，每个灰色矩形都是使用网格和嵌套网格制作的：

我经常发现自己正在设计“表格数据”，其中包含元素和子元素（如上图中央的单个灰色框），看起来有点像这样：

控件之类的某些元素必须对齐，当您点击元素时，它会显示一个下拉菜单，其中包含有关该项目的更多详细信息。

我经常在模型阶段使用网格系统来处理这种元素，因为它可以快速实现对齐并尝试不同的宽度，但是在完善设计时，基础网格在调整大小时会受到默认行为的影响。浏览器，间距和它产生了很多网格特定的标记，使得HTML代码难以阅读和理解。

所以我的问题是：你是否在设计中使用基础网格来表示这些细节，如果没有，你最喜欢的方法是在同一条线上使用不同的对齐方式获得多个元素，并使某些元素彼此对齐（带有硬编码宽度的简单div？显示：table？还有什么？）。

我知道有一个新的CSS3 flexbox模块可以允许这种显示，但它看起来更像是基础网格系统的替代，而不是在设计这个级别的细节时的方式。设计。

Answer 1

看起来如何使用基金会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);}