Grid 网格流向与间距

除了基本的网格格线或网格空间名称，Grid 网格容器也有一些专门控制细节的样式属性，例如 grid-auto-flow 控制网格流向，grid-gap、grid-row-gap 和 grid-column-gap 控制间距，grid-auto-columns 和grid-auto-rows 自动格线，这篇教学会介绍这些样式属性的用法。

相关文章：Grid 网格容器与格线、Grid 网格空间与命名、Grid 排列网格项目、Grid 网格项目对齐、顺序与对齐

快速导览：

• grid-auto-flow 网格流向
• grid-auto-columns、grid-auto-rows 自动格线
• grid-row-gap、grid-column-gap、grid-gap 网格间距
• row-gap、column-gap、gap 网格间距 ( 新 )

grid-auto-flow 网格流向

grid-auto-flow 表示“网格项目的流向”，没有继承特性，有 row 和 column 两种属性值，row 是默认值，表示网格项目会“先填满列，在换行到另外一列”( 水平先填满 )，column 表示网格项目会“先填满栏，在换行到另外一栏”( 垂直先填满 )，下方范例会展示两种不同的流向。

线上展示：https://codepen.io/oxxo/pen/ExqZzRg

<!-- HTML 程式碼-->
<div class="g g1"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
<div class="g g2"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>


<!-- CSS 程式碼 -->
<style>
  .g {
    width: 240px;
    height: 240px;
    outline: 1px solid #000;
    margin: 10px;
    float: left;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
  .g1 {grid-auto-flow: row;}
  .g2 {grid-auto-flow: column;}
  .g div {outline: 1px dashed #000;}
</style>

除了单纯使用 row 和 column 属性值，也可以额外加上“dense”的设定，让属性值变成“row dense”或“column dense”，加上 dense 之后，网格元素在排列时，会让后方大小适合的项目，自动往上填补“额外空间”，例如网格一列有三栏，第一个项目占了两栏，如果第二个项目也是两栏，就会换行到第二列，发生“空出一栏”的状况，如果加上 dense，就会让第二个以后只占一栏的元素补满空的这一栏。

下方的范例使用两组网格，左方是默认值“row”，右方使用“row dense”，当网格项目大小不一时，默认流向就会出现“空格”，但如果加上了“dense”，就会让大小适合的后方项目往上填补空格。

注意，范例中将网格项目的起始格线使用默认值“auto”才能一个接着一个，并搭配“span”延伸范围，如果有指定起始格线，等同指定“绝对位置”，dense 就会失去作用。

线上展示：https://codepen.io/oxxo/pen/VwoPOdr

<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<div class="g g1 a"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
<div class="g g2 a"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>


<!-- CSS 程式碼 -->
<style>
  .g {
    width: 240px;
    height: 240px;
    outline: 1px solid #000;
    position: absolute;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  .g1 {
    left: 10px;
    grid-auto-flow: row;
  }
  .g2 {
    left: 270px;
    grid-auto-flow: row dense;
  }
  .g div {outline: 1px dashed #000;}
  .a {z-index: 1;}
  .a div:nth-child(1) {
    grid-column: auto / span 2;
    background: #f44;
  }
  .a div:nth-child(2) {
    grid-column: auto / span 1;
    background: #09f;
  }
  .a div:nth-child(3) {
    grid-column: auto / span 2;
    background: #0c0;
  }
  .a div:nth-child(4) {
    grid-column: auto / span 1;
    background: #f90;
  }
  .a div:nth-child(5) {
    grid-column: auto / span 2;
    background: #f0f;
  }
  .a div:nth-child(6) {
    grid-column: auto / span 2;
    background: #ff0;
  }
  .a div:nth-child(7) {
    grid-column: auto / span 1;
    background: #999;
  }
  .a div:nth-child(8) {
    grid-column: auto / span 2;
    background: #0ff;
  }
  .a div:nth-child(9) {
    grid-column: auto / span 1;
    background: #a9f;
  }
</style>

grid-auto-columns、grid-auto-rows 自动格线

在“Grid 网格容器与格线”教学中有介绍过如何设定网格格线，而 CSS 也有提供“自动格线”的样式属性：grid-auto-columns 和 grid-auto-rows，自动格线表示当网格项目超过格线设定时，会“自动且重复”产生设定值的格线，这两个样式属性“无法同时使用”，且需要搭配 grid-auto-flow 共同使用，参考下方搭配方式：

• grid-auto-columns 需要搭配 grid-auto-flow: column。
• grid-auto-rows 需要搭配 grid-auto-flow: row。

下方的范例会分别使用两组网格容器，当中“有透过格线”设定的网格只有“六个”，但却放入了 16 个网格项目，超过六个之后的项目，会使用自动格线的设定排列，这种设定方式可针对“无法确定有多少个内容”的网格排版。

线上展示：https://codepen.io/oxxo/pen/wvVgbXR

<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 240px;
    height: 200px;
    outline: 1px solid #000;
    margin: 10px 10px 25px;
    display: grid;
  }
  .g1 {
    grid-template-columns: repeat(3,1fr);  /* 每一列都是三欄，彈性分配 1r */
    grid-template-rows: repeat(2, 1fr);    /* 換行後只有前兩列都是 1fr */
    grid-auto-flow: row;                   /* row 流向 */
    grid-auto-rows: 10px 50px;             /* 超過兩列之後使用 10px 50px 的規律重複每一列 */
  }
  .g2 {
    grid-template-columns: repeat(2, 1fr);  /* 換行後只有前兩欄都是 1fr */
    grid-template-rows: repeat(3, 1fr);     /* 每一欄都是三列，彈性分配 1r */
    grid-auto-flow: column;                 /* column 流向 */
    grid-auto-columns: 10px 50px;           /* 超過兩欄之後使用 10px 50px 的規律重複每一欄 */
  }
  .g div {outline: 1px solid #000;}
  .g div:nth-child(n+7){background: #f90a;} /* 第六個之後的項目都有背景色 */
</style>

grid-row-gap、grid-column-gap、grid-gap 网格间距

grid-row-gap、grid-column-gap 和 grid-gap 样式属性可以从“格线”的层级，设定网格项目的排列间距，三个样式属性都没有继承特性，默认值都是 0，可使用长度单位的数值设定间距，的说明如下：

下方范例使用三组网格容器，分别呈现三种不同网格间距样式属性的呈现方式。

线上展示：https://codepen.io/oxxo/pen/KKOaLeO

<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 240px;
    height: 240px;
    outline: 1px solid #000;
    margin: 10px 10px 25px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
  }
  .g1 {grid-row-gap: 10px;}
  .g2 {grid-column-gap: 10px;}
  .g3 {grid-gap: 20px 5px;}
  .g div {
    background: #f609;
    outline: 1px solid #000;
  }
</style>

row-gap、column-gap、gap 网格间距 ( 新 )

row-gap、column-gap 和 gap 是比较新的样式属性，和 grid-row-gap、grid-column-gap 和 grid-gap 完全相同 ( 只有名称不同 )，同样是从“格线”的层级，设定网格项目的排列间距，三个样式属性都没有继承特性，默认值都是 0，可使用长度单位的数值设定间距，的说明如下：

这三个样式属性也可作用于 Flex 弹性元素，参考：row-gap、column-gap、gap 弹型元素间距

下方范例使用三组网格容器，分别呈现三种不同网格间距样式属性的呈现方式。

线上展示：https://codepen.io/oxxo/pen/yyBPOoR

<!-- HTML 程式碼-->
<div class="g g1"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div class="g g3"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 240px;
    height: 240px;
    outline: 1px solid #000;
    margin: 10px 10px 25px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
  }
  .g1 {row-gap: 10px;}
  .g2 {column-gap: 10px;}
  .g3 {gap: 20px 5px;}
  .g div {
    background: #f609;
    outline: 1px solid #000;
  }
</style>

小结

这篇教学所介绍的“流向”、“自动格线”和“间距”都是属于比较细节的网格容器设定，虽然大多数的排版情况不会用到，但如果需要用到的时候却很方便，有机会不妨使用看看吧。

相关文章：Grid 网格容器与格线、Grid 网格空间与命名、Grid 排列网格项目、Grid 网格项目对齐、顺序与对齐

意见反馈