一、网格嵌套（Nested Grid）
网格嵌套是指在一个列（columns）内部，再嵌入一个新的 row 和 columns 结构，实现更复杂的布局。
嵌套规则
.row内部只能直接包含.columns的<div>.columns内部可以包含新的.row- 新的
.row内部再次使用.columns
嵌套示例
<div class="row">
<div class="small-8 columns">
.small-8
<div class="row">
<div class="small-8 columns">
.small-8 Nested
<div class="row">
<div class="small-8 columns">.small-8 Nested Again</div>
<div class="small-4 columns">.small-4</div>
</div>
</div>
<div class="small-4 columns">.small-4</div>
</div>
</div>
<div class="small-4 columns">.small-4</div>
</div>Code language: HTML, XML (xml)以上示例展示了三层嵌套：外层 8+4 布局，中层 8+4 布局，内层再次 8+4 布局。
二、列偏移（Column Offset）
列偏移用于将某一列向右推移指定的列数，左侧会留出空白间距。
使用以下类控制偏移量：
.small-offset-*（手机端）.medium-offset-*（平板端）.large-offset-*（桌面端）
* 为偏移的列数，基于 12 列栅格系统。
列偏移示例
<div class="row">
<div class="large-1 columns" style="background-color:red;">1</div>
<div class="large-11 columns" style="background-color:green;">11</div>
</div>
<div class="row">
<div class="large-1 columns" style="background-color:red;">1</div>
<div class="large-10 large-offset-1 columns" style="background-color:green;">10, offset 1</div>
</div>
<div class="row">
<div class="large-1 columns" style="background-color:red;">1</div>
<div class="large-9 large-offset-2 columns" style="background-color:green;">9, offset 2</div>
</div>
<div class="row">
<div class="large-1 columns" style="background-color:red;">1</div>
<div class="large-8 large-offset-3 columns" style="background-color:green;">8, offset 3</div>
</div>Code language: HTML, XML (xml)偏移后，列左侧会留出对应列数的空白区域，常用于居中布局或右侧内容对齐。
三、完整可运行示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foundation 网格嵌套与列偏移</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
<script src="foundation-5.5.3/js/vendor/jquery.js"></script>
<script src="foundation-5.5.3/js/foundation.min.js"></script>
<script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
<style>
.columns {
border: 1px solid #ccc;
text-align: center;
padding: 10px;
color: #fff;
}
</style>
</head>
<body>
<div class="row">
<div class="medium-12 columns">
<h3>网格嵌套示例</h3>
<div class="row">
<div class="small-8 columns" style="background-color:#333;">
.small-8
<div class="row">
<div class="small-8 columns" style="background-color:#666;">
.small-8 Nested
<div class="row">
<div class="small-8 columns" style="background-color:#999;">.small-8 Nested Again</div>
<div class="small-4 columns" style="background-color:#bbb; color:#333;">.small-4</div>
</div>
</div>
<div class="small-4 columns" style="background-color:#999;">.small-4</div>
</div>
</div>
<div class="small-4 columns" style="background-color:#555;">.small-4</div>
</div>
<hr />
<h3>列偏移示例</h3>
<div class="row">
<div class="large-1 columns" style="background-color:red;">1</div>
<div class="large-11 columns" style="background-color:green;">11</div>
</div>
<div class="row">
<div class="large-1 columns" style="background-color:red;">1</div>
<div class="large-10 large-offset-1 columns" style="background-color:green;">10, offset 1</div>
</div>
<div class="row">
<div class="large-1 columns" style="background-color:red;">1</div>
<div class="large-9 large-offset-2 columns" style="background-color:green;">9, offset 2</div>
</div>
<div class="row">
<div class="large-1 columns" style="background-color:red;">1</div>
<div class="large-8 large-offset-3 columns" style="background-color:green;">8, offset 3</div>
</div>
</div>
</div>
</body>
</html>Code language: HTML, XML (xml)四、小结
网格嵌套
.row内部只能直接放.columns.columns内部可以嵌套新的.row- 嵌套层级不限，每一层都基于 12 列重新计算
列偏移
- 使用
.small-offset-*/.medium-offset-*/.large-offset-*控制 - 偏移列数
*范围为 1–11 - 偏移后原列右侧内容自动重新排列
- 常用于居中、右侧对齐、留白布局
Previous: 块状网格-均分
Next: Foundation 表格样式