css - 使用zurb Foundation 4网格系统设计列表元素

Question

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

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

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

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

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

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

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

Answer 1

看起来要走的路是使用 Foundation网格混合（如页面底部所述）。

它为您提供了两全其美的优势：基础网格的易用性，同时仍然能够微调网格的行为（列之间的空间等），这可能因您设计的每个元素而异。

另一个优点是您不需要演示类。而不是写类似的东西

<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);}