网格

使用默认的 12 列、可嵌套的 Foundation 网格，快速轻松地创建强大的多设备布局。如果您熟悉网格系统，您会感到宾至如归。如果没有，您会很快学会。

导入

**从 Foundation v6.4 开始，浮动网格默认禁用**，由新的 [XY 网格](xy-grid.html) 取代。除非您需要支持 IE 10，否则建议使用 XY 网格。

要在 Foundation v6.4+ 中使用浮动网格，您需要

在 CDN 链接或包管理器中：导入 foundation-float.css 代替 foundation.css。
在 Sass 中：将 $xy-grid 和 $global-flexbox 都设置为 false。

基础知识

首先添加一个带有 .row 类的元素。这将创建一个水平块来包含垂直列。然后在该行中添加带有 .column 类的元素。使用 .small-#、.medium-# 和 .large-# 类指定每列的宽度。

Foundation 优先考虑移动设备。 首先编写适用于小屏幕的代码，更大的设备将继承这些样式。根据需要针对更大的屏幕进行自定义。

在视频中观看此部分

默认情况下，`.column` 有一个别名 `.columns`（请参阅 `$grid-column-alias` 选项）——唯一的区别是语法。

禁用别名可以将 Foundation CSS 文件大小减少 3% 到 5%。如果不使用别名，则建议禁用它。

<div class="row">
  <div class="columns small-2 large-4"><!-- ... --></div>
  <div class="columns small-4 large-4"><!-- ... --></div>
  <div class="columns small-6 large-4"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns large-3"><!-- ... --></div>
  <div class="columns large-6"><!-- ... --></div>
  <div class="columns large-3"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns small-6 large-2"><!-- ... --></div>
  <div class="columns small-6 large-8"><!-- ... --></div>
  <div class="columns small-12 large-2"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns small-3"><!-- ... --></div>
  <div class="columns small-9"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns large-4"><!-- ... --></div>
  <div class="columns large-8"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns small-6 large-5"><!-- ... --></div>
  <div class="columns small-6 large-7"><!-- ... --></div>
</div>
<div class="row">
  <div class="columns large-6"><!-- ... --></div>
  <div class="columns large-6"><!-- ... --></div>
</div>

完整3

完整6

完整3

完整2

完整4

完整8

完整6

小网格

与大网格挤在小屏幕上相比，小网格更容易扩展到大屏幕。

在视频中观看此部分

<div class="row">
  <div class="columns small-2">2</div>
  <div class="columns small-10">10</div>
</div>
<div class="row">
  <div class="columns small-3">3</div>
  <div class="columns small-9">9</div>
</div>

中等网格

中等大小的屏幕将继承小屏幕的样式，除非您使用中等网格类指定不同的布局。

在视频中观看此部分

<div class="row">
  <div class="columns medium-2">2</div>
  <div class="columns medium-10">10</div>
</div>
<div class="row">
  <div class="columns medium-3">3</div>
  <div class="columns medium-9">9</div>
</div>

高级

组合列/行

如果您只有一列，则可以通过在同一元素上组合 .row 和 .column 类来节省一些标记。您仍然可以像往常一样在此容器中嵌套更多网格。

列行可以使用 .small-8 等大小调整类，但仅当用作顶级容器时——而不是嵌套在另一行中时。

<div class="column row">
  Row column
</div>

行列

流体行

通常，行的宽度始终为 1200 像素。通过添加 .expanded 类使行完全流畅。

在视频中观看此部分

<div class="expanded row">
</div>

嵌套

您可以无限期地嵌套网格，尽管在某个时候它会变得荒谬。

在视频中观看此部分

<div class="row">
  <div class="columns small-8">8
    <div class="row">
      <div class="columns small-8">8 Nested
        <div class="row">
          <div class="columns small-8">8 Nested Again</div>
          <div class="columns small-4">4</div>
        </div>
      </div>
      <div class="columns small-4">4</div>
    </div>
  </div>
  <div class="columns small-4">4</div>
</div>

嵌套 8 层

再次嵌套 8 层

偏移

通过使用 .large-offset-1 和 .small-offset-3 等类，将块向右移动最多 11 列。

在视频中观看此部分

<div class="row">
  <div class="columns large-1">1</div>
  <div class="columns large-11">11</div>
</div>
<div class="row">
  <div class="columns large-1">1</div>
  <div class="columns large-10 large-offset-1">10, offset 1</div>
</div>
<div class="row">
  <div class="columns large-1">1</div>
  <div class="columns large-9 large-offset-2">9, offset 2</div>
</div>
<div class="row">
  <div class="columns large-1">1</div>
  <div class="columns large-8 large-offset-3">8, offset 3</div>
</div>

10，偏移 1

9，偏移 2

8，偏移 3

不完整行

为了解决浏览器不同的舍入行为，Foundation 会将一行中的最后一列向右浮动，以便边缘对齐。如果您的行的列数加起来不等于 12 列，您可以使用 .end 类标记最后一列以覆盖该行为。或者，您可以将 $grid-column-align-edge 变量设置为 false 以完全关闭此行为。

<div class="row">
  <div class="columns medium-3">3</div>
  <div class="columns medium-3">3</div>
  <div class="columns medium-3">3</div>
</div>
<div class="row">
  <div class="columns medium-3">3</div>
  <div class="columns medium-3">3</div>
  <div class="columns medium-3 end">3 end</div>
</div>

3 结束

间距

响应式间距

网格的*间距*——一行中两列之间的空间，以及网格边缘与页面边缘之间的空间——是响应式的，并且在更大的屏幕上会变得更大。

断点	间距大小
`小`	20px
`中等`	30px

如果您使用的是 Sass 版本的 Foundation，您可以通过编辑 $grid-column-gutter 变量映射来更改这些默认值

$grid-column-gutter: (
  small: 20px,
  medium: 30px,
);

要添加更多间距定义，请向映射添加新行。此处使用的断点名称必须与项目 $breakpoints 映射中的断点名称匹配。

静态间距

如果您希望对每个断点使用一种间距大小，只需对 $grid-column-gutter 变量使用一个数字

$grid-column-gutter: 30px;

您还可以通过添加 .gutter-[size] 类来显式设置特定网格行的间距大小。当您使用响应式间距但特定组件需要静态间距时，这非常有用。

<div class="row gutter-small">
  <div class="columns">This grid always has small gutters</div>
</div>

折叠/展开行

.collapse 类允许您删除列间距（填充）。

有时您不希望折叠或展开每个媒体查询。在这种情况下，请使用您想要的媒体查询大小并折叠或展开并将其添加到您的行元素中。示例显示了小号和中号的间距，大号及以上的间距为零。

<div class="row medium-uncollapse large-collapse">
  <div class="columns small-6">
    Removes gutter at large media query
  </div>
  <div class="columns small-6">
    Removes gutter at large media query
  </div>
</div>

将浏览器缩小到中等大小以查看差异。

在小屏幕上，我有间距！

在中等屏幕上，我有间距！

在大屏幕上，我没有间距！

在小屏幕上，我有间距！

在中等屏幕上，我有间距！

在大屏幕上，我没有间距！

居中列

通过向列添加 .small-centered 类来居中您的列。大号将默认继承小号居中，但您也可以通过应用 .large-centered 类仅在大号上居中。要在大屏幕上取消居中，请使用 .large-uncentered。

在视频中观看此部分

<div class="row">
  <div class="columns small-3 small-centered">3 centered</div>
</div>
<div class="row">
  <div class="columns small-6 large-centered">6 centered</div>
</div>
<div class="row">
  <div class="columns small-9 small-centered large-uncentered">9 centered</div>
</div>
<div class="row">
  <div class="columns small-11 small-centered">11 centered</div>
</div>

3 居中

6 居中，大

9 居中小

11 居中

源排序

使用这些源排序类，您可以在我们的断点之间移动列。这意味着如果您将子导航放置在小显示器上主要内容的下方，则可以选择将子导航放置在页面左侧或右侧以用于大显示器。使用您要应用样式的设备的大小作为前缀推送/拉取。您将使用的语法是 .medium-push-#、.large-push-#。使用数字 0 来重置推送/拉取，例如 .medium-push-0 或 .large-pull-0。

在视频中观看此部分

<div class="row">
  <div class="columns small-10 small-push-2">10</div>
  <div class="columns small-2 small-pull-10">2, last</div>
</div>
<div class="row">
  <div class="columns large-9 large-push-3">9</div>
  <div class="columns large-3 large-pull-9">3, last</div>
</div>
<div class="row">
  <div class="columns large-8 large-push-4">8</div>
  <div class="columns large-4 large-pull-8">4, last</div>
</div>
<div class="row">
  <div class="columns small-5 small-push-7 medium-7 medium-push-5">7</div>
  <div class="columns small-7 small-pull-5 medium-5 medium-pull-7">5, last</div>
</div>
<div class="row">
  <div class="columns medium-6 medium-push-6">6</div>
  <div class="columns medium-6 medium-pull-6">6, last</div>
</div>

2，最后

3，最后

4，最后

5，最后

6，最后

块网格

块网格是创建大小相等的列的快捷方式。添加格式为 .[size]-up-[n] 的类以更改行内的列数。默认情况下，块网格可使用的最大列数为 8。向列添加 .column-block 类将应用等于间距宽度的底部边距。

在视频中观看此部分

<div class="row small-up-2 medium-up-3 large-up-4">
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
  <div class="column column-block">
    <img src="https://placehold.it/600x600" class="thumbnail" alt="">
  </div>
</div>

语义构建

我们的网格 CSS 是使用一组强大的 Sass mixin 生成的，您可以在自己的代码中使用它来构建语义网格。

行

使用 grid-row() mixin 创建一行。

.container {
  @include grid-row;
}

列

使用 grid-column() mixin 创建一列。有多种方法可以定义列的宽度。

.main-content {
  // Use the full column count (100%)
  @include grid-column;

  // Use a column count (33%);
  @include grid-column(4);

  // Use a percentage (15%)
  @include grid-column(15%);

  // Use a custom fraction (20%)
  @include grid-column(1 of 5);
}

网格列计算器也可以作为函数访问。这为您提供了百分比值，没有任何网格列 CSS。

.main-content {
  width: grid-column(1 of 7);
}

要语义上居中一列。使用“grid-column-position(center);”。

.centered-column {
  @include grid-column-position(center);
}

多个网格

默认情况下，所有网格都使用 $grid-column-count 变量设置的列数。但是，这可以在行的实例中选择性地覆盖。

在此示例中，网格为 16 列，而不是通常的 12 列。对 mixin 中列数学的任何引用都将使用新的列数。

.container {
  @include grid-row(16) {
    .main-content {
      // 11/16 = 68.75%
      @include grid-column(11);
    }

    .sidebar {
      // 5/16 = 31.25%
      @include grid-column(5);
    }
  }
}

您还可以通过使用 grid-context() mixin 来临时更改网格上下文，而无需输出任何行 CSS。

@include grid-context(7) {
  .sidebar {
    @include grid-column(4);
  }
}

每个其他网格功能，从大小调整到偏移到源排序，也可以使用 mixin 访问。将它们与 breakpoint() mixin 配对以使您的网格具有响应性。

请参阅下面的 Sass 文档以了解每个 mixin 的工作原理。

.main-content {
  // The mixins have shorthands, too!
  @include grid-col;

  @include breakpoint(medium) {
    // Changes size only
    @include grid-col-size(8);

    // Changes position only
    @include grid-col-pos(4);
  }
}

自定义区块网格

使用 grid-layout() mixin 来创建您自己的区块网格。默认情况下，mixin 接受 3 个参数

列数
子元素选择器
- 可选的填充值

可以将填充值设置为 $grid-column-gutter 以使用该映射中的值。这将在不同的断点处生成不同的填充。或者，提供一个数值（不带单位类型）以输出静态 rem 值。

以下是一个示例

.gallery {
  @include grid-layout(3, '.gallery-item', $grid-column-gutter);
}

输出以下 CSS

.gallery > .gallery-item {
  width: 33.33333%;
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

@media screen and (min-width: 40em) {
  .gallery > .gallery-item {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}

.gallery > .gallery-item:nth-of-type(1n) {
  clear: none;
}

.gallery > .gallery-item:nth-of-type(3n+1) {
  clear: both;
}

.gallery > .gallery-item:last-child {
  float: left;
}

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$grid-row-width`	数字	`$global-width`	一行的最大宽度。
`$grid-column-count`	数字	`12`	网格的默认列数。更改此值会影响网格 mixin 的逻辑以及输出的 CSS 类数。
`$grid-column-gutter`	映射或长度	`small: 20px medium: 30px`	不同屏幕尺寸下列之间的间距。要仅使用一种尺寸，请将变量设置为数字而不是映射。
`$grid-column-align-edge`	布尔值	`true`	如果为 `true`，则行中的最后一列将与行的另一边对齐。
`$grid-column-alias`	字符串	`'columns'`	用于列别名的选择器（使用 @extend）。如果为 `false`，则不会创建别名。
`$block-grid-max`	数字	`8`	使用区块网格 CSS 时可用的 `.x-up` 类的最大数量。

Mixin

我们使用这些 mixin 来构建此组件的最终 CSS 输出。您可以自己使用 mixin 来从我们的组件中构建自己的类结构。

grid-column

@include grid-column($columns, $gutters);

创建网格列。

参数	类型	默认值	描述
`$columns`	混合	`$grid-column-count`	列的宽度。有关可能的值，请参阅 `grid-column()` 函数。
`$gutters`	混合	`$grid-column-gutter`	列之间的间距。有关可能的值，请参阅 `grid-column-gutter()` 函数。

grid-column-row

@include grid-column-row($gutters);

创建网格列行。这等效于将 .row 和 .column 添加到同一个元素。

**别名：** grid-col-row()

参数	类型	默认值	描述
`$gutters`	混合	`$grid-column-gutter`	列行两侧的排水沟宽度。有关可能的值，请参阅 `grid-column-gutter()` 函数。

grid-column-gutter

@include grid-column-gutter($gutter, $gutters);

设置列上的排水沟

参数类型默认值描述

参数	类型	默认值	描述
`$gutter`	数字或关键字	`auto`	列之间的间距，接受多个值单个值将使排水沟的大小精确。断点名称将使排水沟在 $gutters 映射中具有相应的大小。 “auto”将使排水沟响应，使用 $gutters 映射值。
`$gutters`	数字或映射	`$grid-column-gutter`	要使用的排水沟映射或单个值。默认情况下为响应式排水沟设置。

$gutter

数字或关键字

auto

列之间的间距，接受多个值

单个值将使排水沟的大小精确。
断点名称将使排水沟在 $gutters 映射中具有相应的大小。
“auto”将使排水沟响应，使用 $gutters 映射值。

$gutters

数字或映射

$grid-column-gutter

要使用的排水沟映射或单个值。默认情况下为响应式排水沟设置。

grid-column-collapse

@include grid-column-collapse;

通过移除填充来折叠列上的排水沟。**注意：**仅在断点内使用此 mixin。要折叠所有屏幕尺寸上的列的排水沟，请改用 grid-column() mixin 的 $gutter 参数。

**别名：** grid-col-collapse()

grid-column-margin

@include grid-column-margin($margin, $margins);

设置网格列上的底部边距以匹配排水沟

参数类型默认值描述

参数	类型	默认值	描述
`$margin`	数字或关键字	`auto`	网格列上的底部边距，接受多个值单个值将使边距的大小精确。断点名称将使边距在 $margins 映射中具有相应的大小。 “auto”将使边距响应，使用 $margins 映射值。
`$margins`	数字或映射	`$grid-column-gutter`	要使用的映射或单个值。默认情况下为响应式排水沟设置。

$margin

数字或关键字

auto

网格列上的底部边距，接受多个值

单个值将使边距的大小精确。
断点名称将使边距在 $margins 映射中具有相应的大小。
“auto”将使边距响应，使用 $margins 映射值。

$margins

数字或映射

$grid-column-gutter

要使用的映射或单个值。默认情况下为响应式排水沟设置。

grid-layout

@include grid-layout($n, $selector, $gutter);

调整子元素的大小，以便每行显示 $n 个项目。

参数类型默认值描述

参数	类型	默认值	描述
`$n`	数字	`无`	每行显示的元素数。
`$selector`	字符串	`'.column'`	用于子元素的选择器。
`$gutter`	数字或列表	`无`	要应用于子元素的排水沟。接受多个值 `$grid-column-gutter` 将使用 `$grid-column-gutter` 映射中的值，包括断点大小。固定的数值会将此排水沟应用于所有断点。

$n

数字

无

每行显示的元素数。

$selector

字符串

'.column'

用于子元素的选择器。

$gutter

数字或列表

无

要应用于子元素的排水沟。接受多个值

$grid-column-gutter 将使用 $grid-column-gutter 映射中的值，包括断点大小。
固定的数值会将此排水沟应用于所有断点。

grid-layout-center-last

@include grid-layout-center-last($n);

向区块网格子元素添加额外的 CSS，以便行中的最后一项自动居中。将此应用于列，而不是行。

参数	类型	默认值	描述
`$n`	数字	`无`	每行显示的项目数。

grid-column-position

@include grid-column-position($position);

重新定位列。

**别名：** grid-col-pos()

参数类型默认值描述

参数	类型	默认值	描述
`$position`	数字或关键字	`无`	它可以是一个数字：列将移动等于指定的列数的宽度。正数会将列推向右侧，而负数会将其拉向左侧。 `center`：列将居中 `auto`：列将被推到左侧（或最后一列的右侧）。

$position

数字或关键字

无

它可以是

一个数字：列将移动等于指定的列数的宽度。正数会将列推向右侧，而负数会将其拉向左侧。
center：列将居中
auto：列将被推到左侧（或最后一列的右侧）。

grid-column-unposition

@include grid-column-unposition;

重置位置定义。

**别名：** grid-col-unpos()

grid-column-offset

@include grid-column-offset($n);

将列向右偏移 $n 列。

**别名：** grid-col-off()

参数	类型	默认值	描述
`$n`	数字或列表	`无`	要偏移的宽度。您可以传入 `grid-column()` mixin 接受的任何值，例如 `6`、`50%` 或 `1 of 2`。

grid-column-end

@include grid-column-end;

禁用行中最后一列与另一边对齐的默认行为。

**别名：** grid-col-end()

grid-context

@include grid-context($columns, $root) { }

更改此 mixin 中定义的列的行为以使用不同的列数。

参数	类型	默认值	描述
`$columns`	数字	`无`	要使用的列数。
`$root`	布尔值	`false`	如果为 `false`，则此 mixin 中的选择器将嵌套在父选择器中。如果为 `true`，则选择器将不会嵌套。

grid-row

@include grid-row($columns, $behavior, $size, $cf, $gutters) { }

创建网格行。

参数	类型	默认值	描述
`$columns`	数字	`null`	此行的列数。`null` 将使用默认列数。
`$behavior`	关键字	`null`	对默认网格样式的修改。`nest` 表示该行将放置在另一行内。`collapse` 表示此行内的列将没有填充。`nest collapse` 结合了这两种行为。
`$size`	关键字或数字	`$grid-row-width`	行的最大大小。设置为 `expand` 以使行占据整个宽度。
`$cf`	布尔值	`true`	是否包含 clearfix。
`$gutters`	数字或映射	`$grid-column-gutter`	反转边距时要使用的排水沟映射或单个值。默认情况下为响应式排水沟设置。

grid-row-nest

@include grid-row-nest($gutters);

反转行的边距以将其嵌套在列中。

参数	类型	默认值	描述
`$gutters`	数字或映射	`$grid-column-gutter`	反转边距时要使用的排水沟映射或单个值。默认情况下为响应式排水沟设置。

grid-row-size

@include grid-row-size($size);

设置网格行大小

参数	类型	默认值	描述
`$size`	关键字或数字	`$grid-row-width`	行的最大大小。设置为 `expand` 以使行占据整个宽度。

grid-column-size

@include grid-column-size($width);

设置网格列的宽度。

**别名：** grid-col-size()

参数	类型	默认值	描述
`$width`	数字或列表	`$grid-column-count`	要使列的宽度。您可以传入 `grid-column()` 函数接受的任何值，例如 `6`、`50%` 或 `1 of 2`。

函数

grid-column

grid-column($columns)

根据多个因素计算列的宽度。

参数类型默认值描述

参数	类型	默认值	描述
`$columns`	数字或列表	`无`	列的宽度。接受多个值百分比值将使列的大小精确。单个数字将使列跨越该数字的列宽，并考虑到父行的列数。格式为“x of y”（不带引号）的列表将创建一个 x 列宽的列，假设父列的总列数为 y。

$columns

数字或列表

无

列的宽度。接受多个值

百分比值将使列的大小精确。
单个数字将使列跨越该数字的列宽，并考虑到父行的列数。
格式为“x of y”（不带引号）的列表将创建一个 x 列宽的列，假设父列的总列数为 y。