使用zurb Foundation 4网格系统设计列表元素答案

【问题标题】：Using zurb foundation 4 grid system to design list elements使用zurb Foundation 4网格系统设计列表元素
【发布时间】：2013-09-17 18:08:58
【问题描述】：

Foundation 4 的网格系统，在您已经使用其他基础元素（无论是文本内容，图像/内容的一般布局页面，如主要内容和侧边栏）。

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

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

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

我经常在模型阶段对此类元素使用网格系统，因为它可以快速归档对齐并尝试不同的宽度，但是在优化设计时，基础网格会妨碍调整大小时的默认行为浏览器，间距，它会产生大量特定于网格的标记，使 html 代码难以阅读和理解。

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

我知道有一个新的 CSS3 flexbox 模块来支持这种显示，但在我看来，它更像是基础网格系统的替代品，而不是在设计中设计这种级别的细节时要走的路。

【问题讨论】：

【解决方案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);}

【讨论】：