Grid 网格容器与格线

Grid 网格排版是一种相当强大又具有弹性的排版系统，不仅可产生类似表格的排版机制，也具有延展或重复的功能，当网页元素转换为“Grid 网格容器”之后，就能借由各种 Grid 相关样式属性进行排版，这篇教学会介绍什么是 Grid 网格容器，以及构成网格的 grid-template-columns、grid-template-rows 等格线样式属性。

相关文章：Grid 网格空间与命名、Grid 网格流向与间距、Grid 排列网格项目、Grid 网格项目对齐、顺序与对齐

快速导览：

• 认识网格容器 Grid
• 网格容器基本架构
• grid-template-columns、grid-template-rows 网格线
  • 固定网格尺寸
  • 弹性网格尺寸
  • 根据内容改变网格尺寸
  • 网格尺寸自动符合内容
  • 重复产生指定尺寸的网格
  • 自动填满网格

认识网格容器 Grid

当元素的 display 显示类型设定为 Grid 或 inline-grid 时，该元素就变成了“网格容器 Grid container”，网格容器里的所有子元素都会变成“网格项目 Grid item”( 子元素里的子元素不会变成网格项目 )，将整个网格容器和网格项目组合起来，就会形成类似“表格”的排版方式，相关说明如下：

下方范例将五个 div 分别设定成不同的显示类型，可以看见 inline 显示类型不会换行也无法调整宽高，inline-grid 元素表现和 inline-block 相同，grid 元素表现和 block 相同。

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

<!-- HTML 程式碼-->
<div class="i">inline</div>
<div class="ib">inline</div>
<div class="gi">inline-grid</div>
<div class="b">block</div>
<div class="gb">grid</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 100px;
    height: 50px;
    margin: 5px;
  }
  .i {display: inline;}
  .ib {display: inline-block;}
  .gi {display: inline-grid;}
  .gb {display: grid;}
</style>

当元素变成网格容器后，网格项目“不支援”下列 CSS 样式属性：float、clear、vertical-align、column-*，同时如果元素“没有标签”包覆，也会自动使用“虚拟标签”替代 ( 不建议出现这种网页内容，因不符合该元素的型态 )，下方范例使用两组 div，第一组 div 的子元素有设定不支援的样式属性，第二组则展示没有标签包覆的内容会使用虚拟标签包覆，而使用 i 和 div 标签包覆的元素会被转换成网格项目，最后就会按照设定呈现三栏。

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

<!-- HTML 程式碼-->
<div class="gb">
<div class="g1">apple</div>
<div class="g2">banana <br>banana</div>
<div class="g3">oxxo</div>
</div>
<div class="gb g2">
  apple <br> banana <i>oxxo</i>
  <div>coconut</div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin: 20px;
  }
  .gb {
    width: 300px;
    display: grid;
    grid-template-columns: 100px 100px 100px; /* 設定三欄，每一欄寬度 100px */
  }
  .g1 {float: right;}                 /* 這個樣式會被忽略 */
  .g2, .g3 {vertical-align: bottom;}  /* 這個樣式會被忽略 */
</style>

网格容器基本架构

使用网格排版最重要的就是“网格线”，由水平和垂直网格线会构成“网格”，这些网格会组成网格容器的“基本架构”，基本架构和网格项目 ( 子元素 ) 没有直接关系，而是提供网格项目放置位置和大小的参考依据，网格容器基本架构如下：

• grid line ( 网格线 )：垂直或水平的格线。
• grid track ( 轨道 )：网格线左右或上下的垂直或水平连续空间。
• grid cell ( 单元格 )：由网格线构成的 1x1 空间。
• grid area ( 网格区域 )：由网格线构成大于 1x1 的空间。

grid-template-columns、grid-template-rows 网格线

网格线由水平的“colume 栏”和垂直的“row 列”所组成，colume 对应的样式属性为 grid-template-columns，row 对应的样式属性为 grid-template-rows，这两个样式属性都没有继承特性，默认值为 none，属性值使用“track-list”语法计算“网格的数量与宽度”，撰写格式如下：

• 使用“空白”分隔多个数值。
• 每个数值代表“网格的宽度”，也可当作“相对”前一个数值的“网格线的位置”。

如果分不清楚中文的“列”究竟是垂直还是水平，但只要打开 Word、Excel 或 Google 试算表，所有表格的中文翻译，垂直方向都是“列”，因此 row 的翻译也就对应到“列”。

了解撰写格式后，可以使用下列几种写法设定网格的数量和宽度：

当网格线设定完成，网格项目默认会按照“左到右、上到下”的顺序放入网格中，下方使用“固定格线位置”写法，可以看出虽然内容元素都是“九个”，但会按照网格设定的不同，产生不同的排版方式。

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

<!-- 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>
<div class="g g3">
  <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>
  div {border: 1px dotted #666;}
  .g {
    width: max-content;
    border: 1px solid #000;
    display: grid;
    margin: 10px;
    float: left;
  }
  /* 3x3 */
  .g1 {
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
  }
  /* 5x2 */
  .g2 {
    grid-template-columns: 20px 30px 40px 50px 60px;
    grid-template-rows: 25px 50px;
  }
  /* 2x5 */
  .g3 {
    grid-template-columns: 25px 50px;
    grid-template-rows: 20px 30px 40px 50px 60px;
  }
</style>

固定网格尺寸

“固定网格尺寸”是最基本的网格设定方式，只需要使用具有“长度单位”的数值标记“网格尺寸”，支援绝对长度和相对长度单位，相对长度的百分比单位会参考网格容器的宽度或高度，下方列出相关写法 ( 前三个 div 宽度为 300px，后三个 div 高度为 100px )：

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

<!-- HTML 程式碼-->
grid-template-columns: 150px 150px;
<div class="g g1"><div>150px</div><div>150px</div></div>
grid-template-columns: 50% 50%;
<div class="g g2"><div>50%</div><div>50%</div></div>
grid-template-columns: 100px 50px 50%;
<div class="g g3"><div>100px</div><div>50px</div><div>50%</div></div>
grid-template-rows: 50px 50px;
<div class="g r g4"><div>50px</div><div>50px</div></div>
grid-template-rows: 50% 50%;
<div class="g r g5"><div>50%</div><div>50%</div></div>
grid-template-rows: 25px 25px 50%;
<div class="g r g6"><div>25px</div><div>25px</div><div>50%</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: 150px 150px;}
  .g2 {grid-template-columns: 50% 50%;}
  .g3 {grid-template-columns: 100px 50px 50%;}

  .r {
    width: 60px;
    height: 100px;
  }
  .g4 {grid-template-rows: 50px 50px;}
  .g5 {grid-template-rows: 50% 50%;}
  .g6 {grid-template-rows: 25px 25px 50%;}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

使用固定网格尺寸的方式设定网格时，如果身为父元素的网格容器也有设定宽高，则可能会发生空间不足而“溢出空间”或空间太多“无法填满空间”的状况，除非有确定非得是这种尺寸，通常不太会使用固定网格尺寸的方式进行排版，下方范例会展示这些溢出或不足的情形。

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

<!-- HTML 程式碼-->
寬度剛剛好
<div class="g g1"><div class="a1">100px</div><div class="a2">100px</div><div class="a3">100px</div></div>
溢出網格容器
<div class="g g2"><div class="a1">100px</div><div class="a2">150px</div><div class="a3">100px</div></div>
網格容器寬度太大
<div class="g g3"><div class="a1">100px</div><div class="a2">50px</div><div class="a3">100px</div></div>
溢出網格容器
<div class="g g4"><div class="a1">25%</div><div class="a2">25%</div><div class="a3">50%</div></div>
網格容器寬度太大
<div class="g g5"><div class="a1">25%</div><div class="a2">25%</div><div class="a3">60%</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: 100px 100px 100px;}
  .g2 {grid-template-columns: 100px 150px 100px;}
  .g3 {grid-template-columns: 100px 50px 100px;}
  .g4 {grid-template-columns: 25% 25% 50%;}
  .g5 {grid-template-columns: 25% 25% 60%;}

  .a1 {background: #f33a;}
  .a2 {background: #0f0a;}
  .a3 {background: #09fa;}
</style>

弹性网格尺寸

“弹性网格尺寸”是会透过“分成几等分”的方式，将网格容器的“可用空间”，根据设定进行分成几等分，使用的数值单位是“fr”，只支援“大于零”的数值，下方展示 fr 单位的计算方式：

下方范例使用六个 div，前三个 div 宽度为 300px，后三个 div 高度为 100px，从中可以看出弹性网格尺寸对于尺寸的表现。

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

<!-- HTML 程式碼-->
grid-template-columns: 1fr 1fr;
<div class="g g1"><div>1fr</div><div>1fr</div></div>
grid-template-columns: 2.5fr 2.5fr;
<div class="g g2"><div>2.5fr</div><div>2.5f</div></div>
grid-template-columns: 1fr 1fr 2fr;
<div class="g g3"><div>1fr</div><div>1fr</div><div>2fr</div></div>
grid-template-rows: 1fr 1fr;
<div class="g r g4"><div>1fr</div><div>1fr</div></div>
grid-template-rows: 2.5fr 2.5fr;
<div class="g r g5"><div>2.5fr</div><div>2.5fr</div></div>
grid-template-rows: 1fr 1fr 2fr;
<div class="g r g6"><div>1fr</div><div>1fr</div><div>2fr</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: 1fr 1fr;}
  .g2 {grid-template-columns: 2.5fr 2.5fr;}
  .g3 {grid-template-columns: 1fr 1fr 2fr;}

  .r {
    width: 60px;
    height: 100px;
  }
  .g4 {grid-template-rows: 1fr 1fr;}
  .g5 {grid-template-rows: 2.5fr 2.5fr;}
  .g6 {grid-template-rows: 1fr 1fr 2fr;}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

因为 fr 单位是以“容器剩余可用宽度”进行计算，所以可以搭配固定网格尺寸一起使用，下方范例使用四个 div，里头都有固定尺寸的网格项目，而使用 fr 为单位的弹性网格会自动分配并补满剩余的宽度。

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

<!-- HTML 程式碼-->
grid-template-columns: 100px 1fr 1fr;
<div class="g g1"><div>100px</div><div>1fr</div><div>1fr</div></div>
grid-template-columns: 100px 2.5fr 2.5fr;
<div class="g g2"><div>100px</div><div>2.5fr</div><div>2.5f</div></div>
grid-template-columns: 100px 1fr 3fr;
<div class="g g3"><div>100px</div><div>1fr</div><div>3fr</div></div>
grid-template-columns: 50px 1fr 50px;
<div class="g g4"><div>50px</div><div>1fr</div><div>50px</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: 100px 1fr 1fr;}
  .g2 {grid-template-columns: 100px 2.5fr 2.5fr;}
  .g3 {grid-template-columns: 100px 1fr 3fr;}
  .g4 {grid-template-columns: 50px 1fr 50px;}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

根据内容改变网格尺寸

“根据内容改变网格尺寸”表示网格的尺寸会根据“网格内容”而改变，有下列几种设定语法：

下方范例中设定为 max-content 的项目会将宽度自动调整为内容所需空间的最大值，设定为 min-content 的 项目会将宽度自动调整为内容所需空间的最小值，如果遇到“过长”的文字内容，就会发生不换行且溢出容器范围的状况，如果其他的项目设定单位 fr 的弹性网格，也会因为过长的文字压缩宽度，甚至在没有内容时发生网格消失的现象。

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

<!-- HTML 程式碼-->
max-content max-content max-content
<div class="g g1"><div>apple</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
min-content min-content min-content
<div class="g g2"><div>apple</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
20px 20px max-content
<div class="g g3"><div>apple</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
1fr 1fr max-content
<div class="g g4"><div></div><div></div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
1fr 1fr max-content
<div class="g g5"><div>Hello World!! I am oxxo, how are you?</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
max-content 1fr 1fr 
<div class="g g6"><div>Hello World!! I am oxxo.studio, how are you?</div><div>apple</div><div>banana</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 15px;
  }
  .g1 {grid-template-columns: max-content max-content max-content;}
  .g2 {grid-template-columns: min-content min-content min-content;}
  .g3 {grid-template-columns: 20px 20px max-content;}
  .g4 {grid-template-columns: 1fr 1fr max-content;}
  .g5 {grid-template-columns: 1fr 1fr max-content;}
  .g6 {grid-template-columns: max-content 1fr 1fr ;}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

使用 max-content 或 min-content 都会受限于内容本身，因此常会发生不如预期的状况，这时可以透过 minmax(min, max) 语法，将网格宽度限制在特定的范围里，就能更容易掌握排版状况，下方范例使用四个 div 展示不同的 minmax 设定结果。

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

<!-- HTML 程式碼-->
max-content max-content minmax(0, max-content)
<div class="g g1"><div>apple</div><div>banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
minmax(min-content, max-content) minmax(min-content, max-content) max-content
<div class="g g2"><div>o oxxo</div><div>ba banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
minmax(min-content, max-content) minmax(min-content, max-content) minmax(0, max-content)
<div class="g g3"><div>o oxxo</div><div>ba banana</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
minmax(10px, max-content) minmax(10px, max-content) minmax(0, max-content)
<div class="g g4"><div></div><div></div><div>Hello World!! I am oxxo.studio, how are you?</div></div>

<!-- CSS 程式碼 -->
<style>
  .g {
    width: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 55px;
  }
  .g1 {grid-template-columns: max-content max-content minmax(0, max-content);}
  .g2 {grid-template-columns: minmax(min-content, max-content) minmax(min-content, max-content) max-content;}
  .g3 {grid-template-columns: minmax(min-content, max-content) minmax(min-content, max-content) minmax(0, max-content);}
  .g4 {grid-template-columns: minmax(10px, max-content) minmax(10px, max-content) minmax(0, max-content);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

网格尺寸自动符合内容

“网格尺寸符合内容”表示网格的尺寸会根据“网格内容”而改变，并尽可能“符合内容的最大宽度或最小宽度”，使用的语法为“fit-content(val)”，val 使用长度单位数值，使用后会让“网格项目永远保持在网格容器里”，除非内容真的太长，不然不会溢出容器，基本上会按照“max(minimum, min(limit, max-content))”公式计算，如果遇到多个字段互相比较，则会按照“minmax(auto, max-content)”和“minmax(auto, limit)”计算出较小的值作为调整参考。

不过通常在排版时不会考虑这些公式 ( 也很难去计算 )，只需要参考下方常见的状况使用：

• 内容最大宽度 < 网格容器可用空间

  数值比较	呈现结果
  val < 内容最小宽度	内容最小宽度
  内容最小宽度 < val < 内容最大宽度	val 数值作为宽度
  内容最大宽度 < val	内容最大宽度

• 内容最大宽度 > 网格容器可用空间

  数值比较	呈现结果
  val < 内容最小宽度	内容最小宽度
  内容最小宽度 < val < 网格容器可用空间	val 数值作为宽度
  网格容器可用空间 < val	网格容器可用空间

下方范例中的 div，会呈现出下列的长相：

• 第一个 div，val 数值都小于内容最小宽度，最后呈现结果就会是内容最小宽度
• 第二个 div，val 数值都大于最小宽度，但因为 val 仍小于内容最大宽度，会采用 val 数值作为宽度。
• 第三到第五个 div：val 数值都大于内容最大宽度，会先采用内容最大宽度，若所有网格的最大宽度加起来超过网格容器宽度，就会根据公式计算分配彼此的宽度。

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

<!-- HTML 程式碼-->
fit-content(5px) fit-content(5px) fit-content(5px)
<div class="g g1"><div>o ox oxx oxxo</div><div>1 2 3 4 5</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
fit-content(50px) fit-content(50px) fit-content(150px)  
<div class="g g2"><div>o ox oxx oxxo</div><div>1 2 3 4 5</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
fit-content(5000px) fit-content(5000px) fit-content(5000px)
<div class="g g3"><div>o ox oxx oxxo</div><div>1 2 3 4 5 6 7</div><div>Hello World!! I am oxxo.studio, how are you?</div></div>
<div class="g g3"><div>Hello World!! I am oxxo.studio, how are you?</div><div>o ox oxx oxxo</div><div>1 2 3 4 5</div></div>
<div class="g g3"><div>o ox oxx oxxo</div><div>1 2 3</div><div>1 2 3 4 5</div></div>


<!-- CSS 程式碼 -->
<style>
  .g {
    width: 400px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 55px;
  }
  .g1 {grid-template-columns: fit-content(5px) fit-content(5px) fit-content(5px);}
  .g2 {grid-template-columns: fit-content(50px) fit-content(50px) fit-content(150px);}
  .g3 {grid-template-columns: fit-content(5000px) fit-content(5000px) fit-content(5000px);}
  .g3 {margin-bottom: 15px}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
</style>

重复产生指定尺寸的网格

“重复产生指定尺寸的网格”会根据“重复的次数”，重复产生指定尺寸的网格，撰写语法如下：

• 语法：repeat(重複次數, 網格設定)。
• 重复次数：
  • 使用“非负值的整数”，表示要重复几次后方所设定的网格
  • 使用“auto-fill”或“auto-fit”，会自动计算网格容器可容纳几次重复。
• 网格设定：可使用之前段落介绍的所有方式设定网格，参考：
  • 使用“空白”分隔网格。
  • 使用“长度、fr”数值设定网格尺寸
  • 支援 max-content、min-content、minmax(min, max)、fit-content(val) 语法。

下方范例分别让三种不同网格设定的网格重复三次，如果后方网格设定为一格，重复三次之后就会变成三格，如果是两个就会变成六格，三格就会变成九格 ( 注意，如果使用固定尺寸的网格，可能会发生溢出网格容器的状况 )。

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

<!-- HTML 程式碼-->
repeat(3, 40px)
<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>
repeat(3, 40px 40px)
<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>
repeat(3, 40px 40px 40px)
<div class="g g3"><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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 25px;
  }
  .g1 {grid-template-columns: repeat(3, 40px);}
  .g2 {grid-template-columns: repeat(3, 40px 40px);}
  .g3 {grid-template-columns: repeat(3, 40px 40px 40px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

如果指了定重复次数但又不想溢出容易，就需要搭配 fr 单位 或 max-content、min-content、minmax(min, max)、fit-content(val) 语法共同操作，下方范例会透过宽度的设定，让网格项目不会溢出容器 ( 注意如果网格里有固定尺寸的网格，当所有的固定尺寸和最小容器尺寸相加后大于容器宽度，仍然会溢出容器 )。

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

<!-- HTML 程式碼-->
repeat(3, 1fr 2fr 3fr)
<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>
repeat(3, 50px 1fr 1fr)
<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>
repeat(3, minmax(min-content, 80px) 70px)
<div class="g g3"><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>
repeat(3, minmax(min-content, 80px) 20px)
<div class="g g4"><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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 25px;
  }
  .g1 {grid-template-columns: repeat(3, 1fr 2fr 3fr);}
  .g2 {grid-template-columns: repeat(3, 50px 1fr 1fr);}
  .g3 {grid-template-columns: repeat(3, minmax(min-content, 80px) 70px);}
  .g4 {grid-template-columns: repeat(3, minmax(min-content, 80px) 20px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

当“重复”撰写 repeat() 时，会自动将所有重复次数加总，例如下方范例，两个重复三次就会变成六次，三个重复三次就会变成九次。

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

<!-- HTML 程式碼-->
repeat(3, 15px) repeat(3, 50px)
<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>
repeat(3, 15px) repeat(3, 50px) repeat(3, 30px)
<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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 25px;
  }
  .g1 {grid-template-columns: repeat(3, 15px) repeat(3, 50px);}
  .g2 {grid-template-columns: repeat(3, 15px) repeat(3, 50px) repeat(3, 30px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

自动填满网格

使用 repeat 语法时，如果“不想要溢出网格容器”但又无法确定重复次数，就可以使用“auto-fill”或“auto-fit”设定值代替重复次数，当发生“溢出容器”的状况时，就会自动将下一次重复的网格换行*，从下方范例可以看出设定 auto-fill 和 auto-fit 的网格容器，因为“9”这格摆放溢出了容器，就自动将这格换行 ( 注意，自动填满网格的写法不支援 fr 单位 )。

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

<!-- HTML 程式碼-->
repeat(auto-fill, 10px 60px)
<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>
repeat(auto-fit, 10px 60px)
<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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 25px;
  }
  .g1 {grid-template-columns: repeat(auto-fill, 10px 60px);}
  .g2 {grid-template-columns: repeat(auto-fit, 10px 60px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

虽然 auto-fill 和 auto-fit 呈现的效果很相似，但由于 auto-fill 会建立一个可以包涵所有项目的空间 ( 可称作“轨道 track” ) 而 auto-fit 不会建立这个空间，当网格项目不足以填满网格容器的状态下进行“对齐”，就产生不同的呈现方式，下方范例将网格容器都设定为“justify-content: center;”水平置中，根据填满方式的不同产生不同的显示方式：

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

<!-- HTML 程式碼-->
repeat(auto-fill, 10px 60px)
<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>
repeat(auto-fit, 10px 60px)
<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>

repeat(auto-fill, 10px 60px)
<div class="g g3"><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>
repeat(auto-fit, 10px 60px)
<div class="g g4"><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: 300px;
    display: grid;
    border: 1px solid #000;
    margin: 5px 0 55px;
    justify-content: center;
  }
  .g1 {grid-template-columns: repeat(auto-fill, 10px 30px);}
  .g2 {grid-template-columns: repeat(auto-fit, 10px 30px);}

  .g3 {grid-template-columns: repeat(auto-fill, 20px 60px);}
  .g4 {grid-template-columns: repeat(auto-fit, 20px 60px);}

  .g div:nth-child(1) {background: #f33a;}
  .g div:nth-child(2) {background: #0f0a;}
  .g div:nth-child(3) {background: #09fa;}
  .g div:nth-child(4) {background: #fc0a;}
  .g div:nth-child(5) {background: #b0fa;}
  .g div:nth-child(6) {background: #666a;}
  .g div:nth-child(7) {background: #05fa;}
  .g div:nth-child(8) {background: #f09a;}
  .g div:nth-child(9) {background: #f90a;}
</style>

小结

Grid 网格容器是 CSS 排版的最新功能，虽然较为复杂，但能做到的事情也更多，这篇教学只是介绍网格的架构，接下来还有其他篇幅会介绍更多细节设定！

相关文章：Grid 网格空间与命名、Grid 网格流向与间距、Grid 排列网格项目、Grid 网格项目对齐、顺序与对齐

意见反馈