网格
如果您熟悉 Foundation for Sites 网格，那么您使用 Foundation for Emails 得心应手。
网格具有两个核心元素：行和列。行定义水平内容部分，列将行划分到并排部分中。
容器
所有电子邮件都应该有一个容器元素。这给电子邮件在更大屏幕上的电子邮件客户端提供了一个最大宽度。它还能让电子邮件居中。
容器是一个完整表格，因此它需要标签 <table>、<tr>、最后是 <td>。类 .container 位于 <table> 中。
<container>All the rows go here</container><html>
<head></head>
<body>
<table align="center" class="container">
<tbody>
<tr>
<td>All the rows go here</td>
</tr>
</tbody>
</table>
</body>
</html>演示
行
行是带有 <tbody> 和 <tr> 的 <table>。在这个 <tr> 中，您放置每个单独的列。<table> 也有类 .row。
在 Inky HTML 中，使用 <row> 标签创建行。
<container>
<row>
Columns go here
</row>
</container><html>
<head></head>
<body>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
Columns go here
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
</body>
</html>演示
列
列的结构有点复杂。在最上层，列是带有类 .columns 的 <th>。
在 <th> 内是另一个表格。列的内容放入 <th> 中。该表格标题的正下方应该有另一个具有类 .expander 的 <th>。该空元素帮助列在小屏幕上扩展到全宽。
到目前为止，我们完整的列语法如下
<th class="columns first last">
<table>
<tr>
<th>This is a column. Columns contain your content.</th>
<th class="expander"></th>
</tr>
</table>
</th>在 Inky HTML 中，使用 <columns> 类创建列。
<columns>This is a column. Columns contain your content.</columns><html>
<head></head>
<body>
<th class="small-12 large-12 columns first last">
<table>
<tbody>
<tr>
<th>This is a column. Columns contain your content.</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</body>
</html>演示
尺寸
列具有 1 到 12 之间的尺寸——这是元素的宽度。Foundation 使用 12 列网格，因此 6 列是整行的宽度的一半。
使用类 .large-n 和 .small-n 设置列大小，其中 n 是列的宽度。.small- 大小应用于移动电子邮件客户端，而 .large- 大小应用于桌面电子邮件客户端。
在 Inky HTML 中，在 <columns> 标签上设置属性 small 或 large，大小指定您想要的尺寸。如果您未填充 small，则默认使用 12。如果您填充 small 但未填充 large，则 large 将使用与 small 相同的值。
<columns small="12" large="6"></columns>第一个和最后一个类
.first 类添加适量 padding-left 以将内容与容器边缘隔开。.last 类添加到行中的最后一组列以向该列添加 padding-right。如果您在 .first 和 .last 之间有列，中间列不需要这些类。
这些类存在的原因是 :last-child 一类的 CSS 属性在大多数电子邮件客户端中无效，因此需要一个类。
在 Inky HTML 中，这些类会自动为您添加。
<columns large="4">One</columns>
<columns large="4">Two</columns>
<columns large="4">Three</columns><html>
<head></head>
<body>
<th class="small-12 large-4 columns first">
<table>
<tbody>
<tr>
<th>One</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-4 columns">
<table>
<tbody>
<tr>
<th>Two</th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-4 columns last">
<table>
<tbody>
<tr>
<th>Three</th>
</tr>
</tbody>
</table>
</th>
</body>
</html>演示
展开器
.expander 会避免 Outlook 中的渲染错误，该错误有时会导致列无法展开至完整宽度。<th> 的默认行为是忽略 width 属性，然后善解人意地仅占用由内容指定的空间，而 expander <th> 的存在会使内容 <th> 变得“贪婪”，并占用为其留出的全部空间，直至达到 width（即 100%）中指定的值。它们被设置为不显示，但会将总宽度踢出到 100% 外，这会强制它们的兄弟 <th> 充分展开。
折叠
折叠行会去除每一列中的留白，即它们之间的间距。向行添加 .collapse 类即可启用此功能。
<row class="collapse">
<columns large="6"><img src="https://placehold.it/300x150/777777/&text=These columns touch" alt=""></columns>
<columns large="6"><img src="https://placehold.it/300x150/999999/&text=These columns touch" alt=""></columns>
</row><html>
<head></head>
<body>
<table class="row collapse">
<tbody>
<tr>
<th class="small-12 large-6 columns first">
<table>
<tbody>
<tr>
<th><img src="https://placehold.it/300x150/777777/&text=These columns touch" alt></th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-6 columns last">
<table>
<tbody>
<tr>
<th><img src="https://placehold.it/300x150/999999/&text=These columns touch" alt></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</body>
</html>演示
偏移
偏移会在列的左侧添加间距。如果行中的所有列相加不足 12，并且您想要调整它们的间距，请使用此功能。
使用 .large-offset-n 类创建偏移，其中 n 是要偏移的列数。因此，例如，.large-offset-3 会将列偏移到行宽度的 25%。可以将它看作是从左侧向外延伸列。
<row>
<columns large="3" class="large-offset-3"><img src="https://placehold.it/150x150/999999/&text=offset column" alt=""></columns>
<columns large="3"><img src="https://placehold.it/150x150/999999" alt=""></columns>
</row><html>
<head></head>
<body>
<table class="row">
<tbody>
<tr>
<th class="large-offset-3 small-12 large-3 columns first">
<table>
<tbody>
<tr>
<th><img src="https://placehold.it/150x150/999999/&text=offset column" alt></th>
</tr>
</tbody>
</table>
</th>
<th class="small-12 large-3 columns last">
<table>
<tbody>
<tr>
<th><img src="https://placehold.it/150x150/999999" alt></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</body>
</html>演示
Sass 引用
变量
可以在项目的 settings file 中使用这些 Sass 变量自定义此组件的默认样式。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$grid-column-count |
数字 | 12 |
电子邮件的默认列数。 |
$column-padding-bottom |
数字 | $global-padding |
列底部的默认填充。 |
$container-radius |
数字 | 0 |
容器的默认边框半径。使用 px 值 |
