【CSS 网格布局 (Grid Layout )】

---

CSS 网格布局 Grid Layout

---

• 网格布局 相关 CSS 属性

用于	属性名
① 集中定义 显式网格和隐式网格 (简写属性)	grid
② 集中设置 显式网格区域 、行轨道 和 列轨道 (简写属性)	grid-template
❶ 设置 显式行轨道的 行线名称 和 行轨道大小	grid-template-rows
❷ 设置 显式列轨道的 列线名称和 列轨道的大小	grid-template-columns
❸ 设置 网格区域和区域名称	grid-template-areas
③ 设置 隐式行轨道的大小	grid-auto-rows
④ 设置 隐式列轨道的大小	grid-auto-columns
⑤ 设置 自动布局元素(隐式轨道中)的排列方式 (逐行/逐列排列, 搭配 grid-row,grid-column 属性 )	grid-auto-flow
⑥ 设置网格的行轨道间隔和列轨道间隔(简写属性,适用于网格容器)	gap (grid-gap)
❶ 行轨道之间的 间隔大小	row-gap (grid-row-gap)
❷ 列轨道之间的 间隔大小	column-gap (grid-column-gap)
⑦ 指定 放置网格项的 区域 (行列起止位置)	grid-area
⑧ 集中定义网格项 列的开始和结束位置 (简写属性)	grid-column
⑨ 集中定义 放置网格项的 行的开始位置和结束位置(简写属性)	grid-row
❶ 放置网格项的 行的起始位置	grid-row-start
❷ 放置网格项的 行的结束位置	grid-row-end
❸ 放置网格项的 列的开始位置	grid-column-start
❹ 放置网格项的 列的结束位置	grid-column-end

---

1. CSS 网格布局的基本概念

• CSS 网格布局 (Grid Layout)
  • ① 作用: 划分区域
    • CSS 网格布局 擅长于将一个页面 划分为几个 主要区域，以及定义 这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。
  • ② 二维布局 / 行和列 双向: 像表格一样，网格布局 是二维布局，我们能够 按行或列 来对齐元素。
    • 在布局上，网格比表格 更可能做到或更简单。如，网格容器的子元素 可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。

---

1.1 网格 相关术语

• ⑴ 网格容器(grid container) 和 网格项 (grid items):
  • ① 网格容器: 通过在元素上声明 ❶ display: grid或❷ display: inline-grid 来 将此元素创建为 网格容器。
    • grid和 inline-grid的区别
      • 不独占一行: inline-grid容器为 ❶ inline特性，因此可以和图片文字 ❷ 一行显示；
      • 独占一行: grid容器保持 ❶ 块状特性，❷ 宽度默认100%，不和内联元素一行显示。
  • ② 网格项: 一旦这样做↑，该元素(网格容器)的 所有 ❶ 直接子元素 都将成为 网格项。
  • ③ 非网格项: 不是网格容器的 直接子级元素时，它们不会参与 到网格布局中，并显示为 正常的文档流。

---

• ⑵ 网格（Grid）
  • 网格 是由 相交的 ❶ 水平线和 ❷ 垂直线 定义的 ，横竖交叉，就像一张网，所以叫网格。可以将网格项 放置 在与这些 行和列划分出的位置上。
  • 显式网格(explicit grid) 和 隐式网格(implicit grid)
    • ① 显式网格 = 表示 使用 grid-template-rows 和 grid-template-columns 属性 指定行和列 进而定义的网格 。
    • ② 隐式网格 = 在显式定义的轨道之外 添加内容 ，而 ❶ 自动创建 的网格，使用 grid-auto-columns和grid-auto-rows 设置这些隐式网格的行列轨道的大小。
      • 隐式网格的重点是 “自动创建”，不是人为事先设置好的行列轨道，因为内容的变化需要，而自动创建的网格。
    • ③ 显式网格的 数量 = 行数 × 列数
      • 2行*3列=6个网格，这6个就是显式网格，但是假如里面有8个 子div，多出来那2个就叫做 隐式网格。
      • 2行 grid-template-rows: 100px 100px; + 3列grid-template-columns: 1fr 1fr 1fr;
        • 

---

• ⑶ 网格线（Grid lines）: 行线 + 列线
  • ① 网格行列 = 网格轨道 ⇒ 网格线
    • 定义网格时，我们定义的是 网格轨道，而不是网格线。网格 会为我们创建 带编号的网格线 来让我们来定位 每一个网格元素.
    • 1个网格，需要4条网格线组成
    • 1个轨道，需要2个网格线组成
  • ② 网格线的编号 和书写模式(writing-mode)
    • 书写模式 ，影响 网格线编号
      • 网格线的编号 顺序取决于 书写模式。
    • 在从左至右 书写的语言中，编号为 1的网格线 位于最左边。
      • 汉语 默认的书写模式下，是从右向左的。
      • 
    • 在从右至左 书写的语言中，编号为 1 的网格线 位于最右边。
      • writing-mode: tb-rl: 文本竖写，元素从右向左。
      • 
  • ③ 网格线的命名
    • 在显式网格中 创建的网格线 可以被命名，在 网格轨道大小的信息 之前或之后的方括号 中命名。当放置一个项目时，你可以使用这些名称 代替编号。
  • ④ 网格线 和 编号寻址(放置网格项) ⇒ 指定 网格项的开始和结束位置
    • 网格线 可以用它们的编号 来寻址。
    • 网格线也会在 隐式网格中 被创建，但是这些网格线 不能通过编号来寻址。
    • 可以通过网格线编号 将项目放置到该网格上。
  • 以下为 3个水平网格线/ 行线 + 4个垂直网格线/ 列线。
    • 

.wrapper {
     
  display: grid;
    grid-template-rows: [row1-start] 1fr [row2-start] 2fr [row3-start] 1fr;
}
.griditem2{
     
    grid-row: row2-start/row3-start;
}

• 

---

• ⑷ 网格轨道（Grid tracks）
  • ① 网格 的行和列，相当于 网格的轨道 ⇒ 分为 列轨道 (column tracks) + 行轨道 ( row tracks )
  • ② 相关属性: 通过 grid-template-columns 和 grid-template-rows 属性来定义 网格中的行和列，即 定义了 网格的轨道。
  • ③ 一个网格轨道 = 网格布局中 任意 ❶ 两条 网格线之间的空间。
  • ④ 隐式网格中的 轨道大小 = 默认为自动大小，可以通过 grid-auto-rows 和 grid-auto-columns 属性 来定义这些 隐式轨道的大小。
• ⑸ 网格单元格（Grid cell）
  • ① 网络单元格 : 网格中的 最小单元 = 四条网格线之间的空间，时类似 表格单元格的存在。
  • ② 网格单元格 和 网格轨道的区别: 相当于 表格中 单元格 和 行/列 ⇒ 一个轨道里，即一行或一列中，可以有多个 网格单元格。
    • 网格轨道 = 网格中 任意两条 网格线之间的空间 = 行线之间空间 / 列线之间的空间
    • 网格单元格 = 四条网格线之间的空间 = 2条行线+ 2 条列线之间的空间
    • 
• ⑹ 网格区域（Grid areas）
  • 网格区域 = 由一个或者多个 ❶ 网格单元格 组成的一个 ❷ 矩形区域。
    • 可以使用 grid-template-areas 属性创建 网格区域，同时 给区域命名。
  • • 网格区域 一定是 矩形的，不可能创建 T形 或 L形 的网格区域，因为 只有上下或者左右相邻近的网格命名相同时，才会形成网格区域。

---

• ⑺ 网格间距（Gutters）， 美 /'gʌtərs/
  • ① 网格间距 = 网格轨道之间的间距
    • 可以通过 grid-column-gap/column-gap，grid-row-gap/row-gap 或者 grid-gap/gap 在网格布局中创建 行轨道间距 + 列轨道间距。
    • 默认情况下，各轨道之间是没有间隔的，设置间隔后，就像在一条河上修建了一座桥，把河划分成了两部分，但是 没有任何元素 可以被放置到网格间距上，就像鱼是不会放在桥上的。
  • ② 网格间距 和 间距大小
    • 能够导致 轨道被间隔开来的属性，除了 网格间距属性，还有 外边距 margin，内边距 padding 或者使用 盒模型对齐中的 空间分布属性 ⇒ 这些方法都会导致 可见间距的产生，因此 网格间距属性 ≠ ”间距大小“。

---

• ⑻ 网格轴（Grid Axis），美 /ˈæksɪs/
  • ① 网格布局 = 二维布局 ⇒ 能够在 行和列中 布置内容 ⇒ 因此 在任何网格中 都有两个轴 ⇒ ❶ 行轴（即 行内轴 = 内联级方向）+ ❷ 列轴（即 块轴 = 块流方向）。
  • ② 网格轴和对齐
    • 行轴+列轴 ⇒ 行对齐+列对齐。
      • 沿着 这些轴，可以使用 盒模型对齐规范 中定义的属性对项目进行 行对齐和列对齐。
    • ❶ 行轴 = 行内轴
      • 
    • ❷ 列轴 = 块轴
      • 
  • ③ 网格轴 和 书写模式(writing-mode)
    • 轴的物理方向 会根据文档的书写模式 而改变。
    • writing-mode: vertical-lr
      • 

.wrapper {
     
  writing-mode: vertical-lr;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  grid-gap: 10px;
}

<div class="wrapper">
  <div class="item1">Item 1div>
  <div class="item2">Item 2div>
  <div class="item3">Item 3div>
  <div class="item4">Item 4div>
  <div class="item5">Item 5div>
div>

---

• ⑼ 网格行（Grid row）
  • 网格行 = 行轨道 = 水平轨道(水平书写模式时) = 两个 水平网格线之间的空间。通过属性 grid-template-rows 或者简写属性 grid， grid-template 设置大小。
    • 当 网格项 被放置到 显式网格中 创建的行外面时，可以在 隐式网格中 创建网格行。默认情况 这些行自动调整大小，也可以使用 grid-auto-rows 属性 设置大小。
• ⑽ 网格列（Grid column）
  • 网格列 = 列轨道 = 垂直轨道(水平书写模式时) = 两个 垂直网格线之间的空间。通过属性 grid-template-columns 或者简写属性 grid，grid-template 设置大小。
    • 网格项目 被放置到显示网格中 创建的列外面时，可以 在隐式网格中 创建网格列。默认情况这些列 自动调整大小，也可以使用 grid-auto-columns 属性 设置大小。

---

• ⑾ 在浏览器中 查看网格
  • 在 Firefox 火狐浏览器中,可查看网格。
  • 
  • 

---

1.2 网格布局的 属性分类

• 网格布局 CSS 属性分类
  • 网格布局相关的 CSS 属性，根据适用对象，分为两部分，一部分 适用对象为 网格容器上，一部分适用对象为 网格项。
  • ① 作用在 网格容器上: 定义 显式轨道，区域，隐式轨道，行列间隔，适用对象都是 网格容器。
  • ② 作用在 网格项上: 设置 某个网格项的 行列的起止位置，即放置区域时，适用对象，都是网格项。

适用对象为: 网格容器(grid container)	适用对象为: 网格项 (grid items)
① grid-template: 集中定义 显示轨道和区域	① grid-area: 集中定义 网格项的行列位置
❶ grid-template-rows	② grid-row : 集中定义 网格项的行的 起止位置
❷ grid-template-areas	③ grid-column: 集中定义 网格项的的列的 起止位置
❸ grid-template-columns	❶ grid-row-start
② gap ( 替代 grid-gap ): 定义 轨道之间的 间隔大小	❷ grid-row-end
❶ row-gap ( 替代 grid-row-gap )	❸ grid-column-start
❷ column-gap ( 替代 grid-column-gap )	❹ grid-column-end
③ grid-auto-columns: 定义 隐式列轨道大小	justify-self
④ grid-auto-rows	align-self
⑤ grid-auto-flow	place-self
⑥ grid: 集中定义 显式轨道和隐式轨道
justify-items
align-items
place-items
justify-content
align-content
place-content

2. grid 属性: 同时定义 显式网格和隐式网格 (简写属性)

• ⑴ 简写属性: grid 是一个 CSS 简写属性，可以用来 设置以下属性：
  • ① 显式网格属性
    • ❶ 显式行轨道大小 grid-template-rows
    • ❷ 显式列轨道大小 grid-template-columns
    • ❸ 网格区域 grid-template-areas
  • ② 隐式网格属性
    • ❶ 隐式行轨道大小 grid-auto-rows
    • ❷ 隐式列轨道大小 grid-auto-columns
    • ❸ 隐式轨道排列方式 grid-auto-flow
  • 只可在一个 grid 属性中 声明显式或隐式网格,不能声明间隔属性。
  • 子属性和初始值: 与其他简写属性同样，若有子属性未被声明，其将 使用初始值。
    • ❶ 无显式行轨道 grid-template-rows: none
    • ❷ 无显式列轨道 grid-template-columns: none
    • ❸ 无显式网格区域 grid-template-areas: none
    • ❹ 根据内容 自动创建 grid-auto-rows: auto
    • ❺ 根据内容 自动创建 grid-auto-columns: auto
    • ❻ 按行填充排列 grid-auto-flow: row
  • 适用对象: 网格容器 grid containers
  • 继承性: 不自动继承 no
  • 间隔值的重置: 另外，此简写声明 无法设置网格的间隔（gutter），间隔 也 不会 被该声明重置。
    • grid属性中，没有设置行列轨道的间隔，前面设置的行列轨道的间隔 也没有被重置为初始值,即间隔仍然存在，不是初始的无间隔。
    • 

    row-gap: 5px;
    column-gap: 10px;
    /*显式行列轨道*/
    grid: 100px 50px/1fr 1fr;

• 示例说明
• ① 初始值 grid: none
  • none表示 设置所有的子属性为 初始值。
• ② 显式行列轨道: grid:
  • 表示和 grid-template用法一致。详细用法 参考 grid-template 属性详解
  • 

/*设置行列轨道的间隔*/	
    row-gap: 5px;
    column-gap: 10px;
/*显式轨道，先行后列，斜杠分隔*/
    grid: 100px 50px/1fr 1fr;

• 上方代码，等价于 下方 分别设置 显式行轨道和显式列轨道

    grid-template-rows: 100px 50px;
    grid-template-columns: 1fr 1fr;

• ③ 显式行轨道/ 自动布局方式 隐式列轨道: grid: / [ auto-flow && dense? ] ?
  • 后面带问号 ? ⇔ 表示该项是 可选的，可以有,也可以没有。
  • 所以 显式行轨道 /后面的 ❶ dense 紧密填充的关键字和 ❷ 隐式列轨道 grid-auto-columns 值都可以省略，可以只设置一个 ❶ 显式的行轨道和 ❷ 自动布局的方式。
    • auto-flow && dense? : &&表示一起使用，实际加上dense 就是 隐式自动布局方式 grid-auto-flow 属性的双值语法，不加dense是单值语法， 等同于 逐行填充 row或 逐列填充column , 双值 等同于 逐行紧密填充 row dense 或 逐列紧密填充 column dense。
    • auto-flow的位置和解析: 关键字在斜杠 /左侧，则解析为 row，如果是在右侧，则解析为 column。但是 始终和 隐式轨道在一侧，因为自动布局 是针对隐式轨道的。→含有auto-flow关键字的一侧 设置的大小 为隐式轨道的大小。
    • auto-flow的位置 还必须写在 隐式轨道的前面，否则会语法错误，如下。
      • 
  • 行列轨道和斜杠/的关系: 前行后列 → 斜杠前面都是 行rows 相关属性，斜杠后面都是 列columns相关属性。

 grid: 50px 50px/auto-flow 1fr 2fr;

• 等同于下方的 代码
  • 

    grid-template-rows: 50px 50px;
    grid-auto-flow: column;/*逐列填充*/
    grid-auto-columns: 1fr 2fr;/*隐式列轨道的大小*/

• ④ 自动布局方式 隐式行轨道 / 显式列轨道: grid: [ auto-flow && dense? ] ? /

 grid: auto-flow dense 50px 100px/ 1fr 2fr;

• 等同于下方代码
  • 

    grid-auto-rows: 50px 100px;
    grid-auto-flow: row dense; /*逐行填充*/
    grid-template-columns: 1fr 2fr;

• 使用总结
  • grid:none就是 子属性都是初始值，不设置网格轨道时候的样子。
  • grid: 同时设置 显式的行列轨道。
  • 剩下的两种 涉及到隐式自动布局和隐式轨道的，都是当显式轨道之外 还想设置 轨道安放项目时使用,如果显式轨道够用，没有一些无处安放的项目时，就不需要设置隐式轨道和隐式自动布局。

---

3. grid-template 属性: 同时设置 显式网格区域 、行轨道 和 列轨道 (简写属性)

• ⑴ 集中设置 网格区域，行轨道，列轨道 (grid columns, rows, areas.): grid-template 属性
  • 简写属性: 是以下子属性的 简写属性。(子属性和初始值) → 行/列/区域
    • ❶ grid-template-columns: none⇔ 默认 不指定 显式列轨道
    • ❷ grid-template-rows: none ⇔ 默认 不指定 显式行轨道
    • ❸ grid-template-areas: none ⇔ 默认 不划分 为指定的网格区域
  • 适用对象: 网格容器 (grid containers)
  • 被继承性: no ⇔ 不会被子元素 自动继承。

---

• ⑵ 语法
  • grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ ? ? ? ]+ [ / ]?
    • ① 行线/列线的名称: line-names = 自定义 字符串标识符
    • ② 轨道大小 : ⇔ | % | | min-content | max-content | auto| minmax(min,max) | fit-content()
    • ③ 显式轨道列表: = [ ? ]+ ?
    • ④ ?: 表示 可选项。
    • ⑤ 行列轨道大小的前后 可以设置 行线和列线的名称。
      • grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;

---

• ⑶ 属性值

  • ① 无 显式网格和网格区域: none:
    • 将所有的3个子属性设置为 none 的关键字，表示没有显式网格 + 没有 指定的网格区域。将隐式生成 行和列。
    • 由 grid-auto-rows 和 grid-auto-columns设置隐式的 行/列的轨道大小。
  • ② 同时 设置 显式的行+/ 列轨道: <'grid-template-rows'> / <'grid-template-columns'>
    • 先行 后列。
      • 指定 行轨道 grid-template-rows与 列轨道 grid-template-columns 的值，并设 grid-template-areas 为 默认值 none ⇔ 默认 不设置网格区域。
      • 分隔符: 行轨道和列轨道的间隔 使用 /。
    • 同时设置 行列轨道 grid-template:auto auto/1fr 1fr 1fr ; = ❶ 行轨道 = 两行 grid-template-rows: auto auto;+ ❷ 列轨道 = 三列 grid-template-columns: 1fr 1fr 1fr;
      • 
  • ③ 可选线名+网格区域+行轨道+可选线名+/+列轨道: [ ? ? ? ]+ [ / ]?
    • [行线名] “区域名1 区域名2 …区域名n” 行轨道大小 [行线名]/列轨道大小1 列轨道大小2 …列轨道大小n
    • 网格区域: 设 grid-template-areas 为列的 。
    • 行轨道: grid-template-rows 为 （默认为 auto）并拼接尺寸前后 所定义之行。
    • 列轨道: /之后 为 grid-template-columns为 显式轨道列表（默认为 none）
    • 禁用属性值: 重复轨道 ⇒ repeat()
      • 轨道被用以与“ASCII art”（即字符画，此处指 字符串）中 行列逐一视觉对齐，因为列的属性值的个数，要对应列轨道的个数，故 列轨道列表中 不允许 重复轨道repeat()函数。
      • 示例1: 在简写属性中 只设置网格区域 grid-template: "left right-up right-up" "left right-down right-down";
        • 几对双引号→几行，1个双引号中 有几个空格分隔的字符串→几列。
        • 一个字符串 = 一行 ⇒ 每一个 给定的字符串 会生成一行。
        • 字符串之间 ⇒ ❶ 空格分隔。
        • 字符串中 空格分隔的字符 = 列 ⇒ 一个字符串中 用空格分隔的每一个单元格(cell)会 生成一列，"a a b"，表示 1行3列。
          • 字符串中的 每个单元格 创建列。
          • 单元格之间 ⇒ 也是 ❶ 空格分隔。
        • 
        • 示例2: 同时设置 行线名称+网格区域和行列轨道
          • [行线名] “区域名1 区域名2 …” 行轨道大小 [行线名] /列轨道大小1 列轨道大小2 …
            • 注意，行线名 要用方括号 []括起来，区域名 要用""双引号 括起来。
          • grid-template: [header]"a a a" 100px [header] [main]"b b b" 200px [main] / 1fr 2fr 1fr;
          • 

• ⑷ 合法值

/* 关键字值 Keyword value */
grid-template: none;

/* 行轨道/列轨道  grid-template-rows / grid-template-columns values */
grid-template: 100px 1fr / 50px 1fr;/*只设置 行列轨道*/
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;/*设置行列轨道 同时设置行线和列线名称*/
grid-template: fit-content(100px) / fit-content(40%);

/* 网格区域 + 行轨道 / 列轨道  grid-template-areas grid-template-rows / grid-template-column values */
grid-template: "a a a"
               "b b b";/*只设置 网格区域*/
grid-template: "a a a" 20%
               "b b b" auto;/*设置网格区域的时候 设置行轨道,一个字符串 对应一行  ⇒  空格分隔,行轨道的大小 放在双引号后面的位置*/
grid-template: [header-top] "a a a"     [header-bottom]
                 [main-top] "b b b" 1fr [main-bottom]
                            / auto 1fr auto;/*设置网格区域的同时，设置行线名称和 网格区域 行轨道 列轨道*/

/* 全局值 Global values */
grid-template: inherit;
grid-template: initial;
grid-template: unset;

---

• ⑸ 浏览器支持
  • 

---

3.1 grid-template-rows 属性: 设置 显式行轨道的 行线名称 和 行轨道大小

• ⑴ 设置 网格 ❶ 行线的名称和 ❷ 行轨道的大小: grid-template-rows 属性， 美 /ˈtemplət/
  • 定义 网格行的 ❶ 网格线的名称和 ❷ 网格轨道的尺寸大小。
  • ① 适用对象
    • 网格容器 (grid containers)
  • ② 初始值: none ⇔ 不指定 显式行轨道
  • ③ 被继承性 (Inherited): no

---

♣ 行线名称:有效的字符串标识符

• ⑵ 网格 显式行轨道的语法

  • grid-template-rows: none | | | ?
    • ⇔ none| length | %| fr | max-content| min-content | minmax(min, max) | auto | fit-content() | repeat() ;
    • 行线名称: = '[' * ']'
      • ① 自定义 字符串标识符: 用户 自定义字符串 标识符。一种 CSS 数据类型；在这里，用来表示 设置的 行线的名称。
      • ② 要区分大小写: 值不能有 任何歧义。
      • ③ 可以由 以下6种字符组成：
        • ❶ 字母: (A - Z, a - z),
        • ❷ 十进制数: (0 - 9),
        • ❸ 连字符: (-),
        • ❹ 下划线: (_),下划线
        • ❺ 转义字符: ( \),
        • ❻ Unicode 编码: （格式：转义字符（\）后跟1到6位十六进制数）
        • 注意：id1, Id1, iD1和ID1都是不同标识符，因为标识符是区分大小写的。另一方面，因为可以解码，所有toto\?和toto\3F 是相同的。
      • ④ 禁用值
        • 不能用 单引号或双引号 包起来。
        • 此外，第一个字符 不能为数字(为什么?)。
          • 在编译原理中，当分析 123 这个字符串的时候，如果变量名 允许第一个字符为数字，分析器就不知道 123该是 数值常量还是 变量名了。
          • 字符串 解析分类: 编译器 在解析程序的时候，读到一个单词的第一个字符 就需要知道 当前这个单词 属于那一类 ⇒ 这样 ❶ 方便于解析，不用回溯。(存疑,尚待证实)
        • 开头的连字符-只能跟字母: 字符串的开头 不能是连字符 (-)后面跟着 数字或连字符，可以是连字符后面跟字母。
        • 开头字符: 可以是字母，连字符，下划线，反斜杠，只有数字不可以做开头，一般都是字母开头的。
      • ⑤ 字符串标识符 和 字符串的区别: 需不需要 双引号/单引号。标识符 不需要 引号。

• 有效值

/* 关键字值 Keyword value */
grid-template-rows: none;

/* 轨道列表值  values */
grid-template-rows: 100px 1fr;
grid-template-rows: [行线名称linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];/*轨道大小的前后 可以设置行线的名称*/
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: subgrid;

/* 隐式轨道列表值  values */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-rows: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-rows: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* 全局值 Global values */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

• 有效标识符

nono79            字母数字混合
ground-level      字母-字母
-test             连字符后跟字母
_internal         下划线后跟字母
\22 toto          Unicode编码后跟字母
bili\.bob         转义的句号

• 无效标识符

34rem             第一个字符 不能是数字
-12rad            第一个字符连字符后 不能跟数字
bili.bob          只有字母数字、连字符-、下划线_不需要转义
--toto            第一个字符 不能为连字符 后跟连字符
'bilibob'         不能用单引号 包起来，这是一个字符串类型
"bilibob"         不能用双引号 包起来，这是一个字符串类型

---

• ⑶ 网格轨道的属性值
  • ① 不指定 显式网格 / 隐式生成行轨道: none
    • 是一个关键字，表示 没有显式网格。默认情况下，网格中的 任何行都将 隐式生成，它们的大小将由 grid-auto-rows 属性决定。
    • 隐式生成的网格
    • 
  • ② 长度值:
    • 非负值的长度值。(整个元素,包括元素的外边距，都放在行轨道中)
    • grid-template-rows: 100px 50px;
      • 
  • ③ 百分比值:
    • 非负值。
    • 相对于 ❶ 网格容器的 <百分比>。
    • 百分比值 和 父元素的大小: 未设置具体的父元素大小，百分比值 不起作用/无效。
      • 未设置 网格容器的大小: 如果网格容器的尺寸大小 取决于 网格轨道的大小（比如 inline-grid） ⇒ 即 如果网格容器的块尺寸 是不确定的, 则百分比值 将被视为 ❶ auto。
    • 默认书写模式+ 未设置具体的高度值时(未设置 height属性时)
      • 百分比值无效，
      • 
    • 设置网格容器 具体高度时 ⇒ 百分比值 才有效。
      • 容器的高度 height: 500px; + 一个行轨道 grid-template-rows:50%;
      • 
  • ④ 按比例分配: 数据类型 ⇔ 可变长度= 数字+fr:
    • 非负值。
    • 用单位 fr 来定义 网格轨道大小的 弹性系数。
      • 每个定义了 数据类型 的网格轨道 会按比例分配 剩余的可用空间。
    • 当外层用一个 minmax() 表示时，它将是一个 自动最小值(即 minmax(auto, ) ) 。
    • grid-template-rows: 1fr 2fr 1fr 2fr;
      • 
  • ⑤ 最大的 最大内容大小: max-content
    • 以网格项的 最大的内容= 宽度值最大 来占据网格轨道。
      • max-content: 详情参见 【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】
      • grid-template-rows:max-content;
        • 
  • ⑥ 最大的 最小内容大小: min-content
    • 以网格项的 最大的最小内容 来占据网格轨道。
    • min-content: 详情参见 【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】
    • grid-template-rows:min-content;
      • 
• ⑦ 设置 大小范围: minmax(min, max) ⇒ minmax()函数 只能用在下面 4个CSS属性中： 设置显式和隐式行列轨道 grid-template-columns，grid-template-rows，grid-auto-columns，grid-auto-rows
  • ⇒ 支持的属性值: minmax( [ | | min-content | max-content | auto ] , [ | | | min-content | max-content | auto ] )
  • 函数详情，参见 minmax() 函数详解 。

---

• ⑧ 根据 容器高度/元素内容 自动分配大小: auto

  • 根据网格 容器的高度值/元素内容 自行决定
    • 示例1: 未设置高度 grid-template-rows:auto;: 根据元素的内容，自动分配
    • 
    • 示例2:设置 网格项的高度时: 根据容器的高度，自动分配
      • height: 80px; + grid-template-rows:auto;
      • 
      • 
  • 搭配属性: 网格轨道大小为 auto (且只有为 auto ) 时，才可以被属性 align-content和 justify-content 拉伸 。

• ⑨ 尺寸由内容决定，内容越多 尺寸越大，但不能超过 限定值limit。: fit-content(limit)

  • 属性值类型:长度值，百分比值 ⇔ fit-content( [ | ] )
  • 更多详解 参见 fit-content() 函数详解。

• ⑩ 重复轨道: repeat( [ | auto-fill | auto-fit ] , ? ? )

  • 表示网格轨道的 重复部分，以一种更简洁的方式 去表示大量而且重复行的表达式。
  • 重复模式: repeat() CSS 函数 表示 轨道列表的 ❶ 重复片段，允许以更紧凑的形式写入大量显示 ❷ 重复模式的列或行。
  • 用于 行/列轨道: 该函数可以用于 CSS Grid 属性中 grid-template-columns 和 grid-template-rows。
    • 参数讲解和更多示例，参见 CSS 的 repeat() 函数 详解。

• ⑪ subgrid

  • subgrid 值 表示网格 将采用其父网格 在该轴上的扩展部分。
  • 不是显式地指定，而是从父网格的定义中 获取网格行/列的大小。
  • 目前支持度很差，不要使用 (2020.5.8)

• 上方 各示例图 涉及代码

• css

*{
     
    margin: 0;
    padding: 0;
}
/*网格容器*/
.gridcontainer{
     
    width: 30%;
    /*height: 500px;*/
    border: solid 5px lightseagreen;
    margin: 5px;
    display: grid;
    /*设置网格的 列轨道*/
    /*grid-template-rows: none;*/
    /*grid-template-rows: 100px 50px;*/
    /*grid-template-rows:50%;!*设置容器高度的具体值时，百分比值 才有效*!*/
    /*grid-template-rows: 1fr 2fr 1fr 2fr;*/
    /*grid-template-rows: minmax(100px,1fr)  200px 2fr;*/
    /*grid-template-rows: minmax(100px,1fr);*/
    /*grid-template-rows:max-content;*/
    /*grid-template-rows:min-content;*/
    /*grid-template-rows:auto;*/
    /*grid-template-rows:fit-content(50px);*/
    /*grid-template-rows:fit-content(50%);*/
    /*grid-template-rows: repeat(3,150px);*/
    /*grid-template-rows: repeat(2,150px 80px);*/
    /*grid-template-rows: repeat(auto-fill,150px) 100px;*/
    /*grid-template-rows: repeat(auto-fit,150px) 100px;*/
}
/*网格项*/
.gridcontainer div{
     
    border: solid 5px #bed5cb;
    margin: 10px;
    padding: 10px;
    font-weight: bold;
    /*max-height: 150px;*/
    /*min-height: 100px;*/
    /*height: 80px;*/

}
.green{
     
    background-color: #c4ffcd;
}
.red{
     
    background-color: #ffdcdd;
}

• html

<div class="gridcontainer">
    <div class="griditem1 green">one: 不怨天尤人，div>
    <div class="griditem2 red">two: 不恶语伤人，div>
    <div class="griditem3 green">three: 群处守嘴，div>
    <div class="griditem4 red">four: 独处守心。div>
div>

---

• ⑷ 网格 行轨道的浏览器支持
  • 

---

3.2 grid-template-columns 属性: 设置 显式列轨道的 列线名称和 列轨道的大小

• ⑴ 设置 网格列的 列线的名称和网格 列轨道的尺寸大小: grid-template-columns 属性
  • 初始值(Initial value): none
  • 适用对象: 网格容器 (grid containers)
  • 被继承性(Inherited): no

---

• ⑵ 显式列轨道的语法
  • grid-template-columns: none| length | %| auto| fr | max-content| min-content | minmax(min, max) | fit-content() | repeat() ;
  • 10 类 常用的属性值 ↑

/* 关键字值 Keyword value */
grid-template-columns: none;

/* 轨道列表值  values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* 自动轨道列表值  values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

/* 全局值 Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

---

• ⑶ 列轨道的 属性值
  • ① 无显式网格 /隐式生成列轨道: none
    • 是一个关键字，表示 没有显式网格。任何列 都将隐式生成，它们的大小 将由 grid-auto-columns 属性决定。
    • grid-template-columns: none;
      • 
  • ② 长度值: length
    • 非负 长度值。
    • grid-template-columns: 150px 100px;
      • 
  • ③ 百分比值: %
    • 相对于 网格容器大小的 非负<百分比>值。
    • grid-template-columns:50% 20% 30%;
      • 
  • ④ 可变长度 按比例分配的单位: fr
    • grid-template-columns:1fr 2fr 1fr;
      • 
  • ⑤ 最大内容: max-content
    • 以网格项的 最大的内容 来占据网格轨道。
    • max-content: 详情参见 【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】
    • grid-template-columns:max-content 100px;
      • 
  • ⑥ 最小内容: min-content
    • 以网格项的 最大的最小内容 来占据网格轨道。
    • min-content: 详情参见 【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】
    • grid-template-columns:min-content 1fr;
      • 
  • ⑦ 大小范围: minmax(min, max)
    • 定义 大小范围的属性，大于等于min值，并且小于等于max值。
    • 如果max值小于min值，则该值会被视为 min值。
    • 最大值可以设置为 网格轨道系数值 可变长度 ，但最小值 则不行。
      • 更多详情，参见 minmax() 函数详解
    • grid-template-columns:minmax(min-content,1fr) 2fr;
      • 
    • 窗口缩小 ⇒ 会随着窗口 一起缩小
      • 
  • ⑧ 自动分配大小: auto
    • 根据容器大小和内容大小 自动分配空间:
      • 如果该网格轨道 为最大时，该属性等同于 ，为最小时，则等同于 。
    • 网格轨道大小为 auto (且只有为 auto ) 时，才可以被属性 align-content 和 justify-content 拉伸 。
    • grid-template-columns: auto auto max-content;
      • 
  • ⑨ fit-content() : 大小随容器缩放，最大值不超过某个限定值。
    • 详情参见 fit-content() 函数详解
    • grid-template-columns:fit-content(100px) auto max-content;
    • 
  • ⑩ 重复轨道: repeat()
    • repeat( [ | auto-fill | auto-fit ] , )
    • 详情参见 repeat() 函数详解。
    • grid-template-columns:repeat(2,1fr) 2fr;
      • 
• 上方涉及代码
• css

   /*网格 列轨道*/
    grid-template-columns: none;
    /*grid-template-columns: 150px;*/
    grid-template-columns: 150px 100px;
    grid-template-columns: 50% 20% 30%;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-columns: max-content 100px;
    grid-template-columns: min-content 1fr;
    grid-template-columns: minmax(min-content,150px) 100px;
    grid-template-columns: minmax(min-content,1fr) 2fr;
    grid-template-columns: auto auto max-content;
    grid-template-columns:fit-content(100px) auto max-content;
    grid-template-columns:repeat(2,1fr) 2fr;

---

• ⑷ 网格 列轨道的浏览器支持
  • 

---

3.3 grid-template-areas 属性: 设置 网格区域和区域名称 (要先设置行列轨道大小)

• ⑴ 划分 网格区域 和 设置区域名称: grid-template-areas 属性
  • 网格区块(grid areas) 和 网格项(grid item)沒有关联。
  • ① 网格区域 搭配属性
    • 可以搭配 ❶ 网格定位属性 使用 ⇒ 比如 grid-row-start， grid-row-end， grid-column-start和 grid-column-end；
    • 也可以搭配 ❷ 网格定位属性的简写属性 使用 ⇒ 比如 grid-row，grid-column 和 grid-area。
  • ② 初始值: none 不设置/划分 网格区域
  • ③ 适用对象: 网格容器 (grid containers)
  • ④ 被继承性: no

---

• ⑵ 网格区域名称的 语法
  • grid-template-areas: none | +;
    • 字符串: 是用来表示 ❶ 一串字符 的 ❷ 数据类型。
      • 不能是实体:中 不能使用像 空格  或者——这样的实体。
      • 引号+万国码字符: 数据类型是 由包含在 英文双引号（"）或 英文单引号（'）中的任意数量的 万国码Unicode 字符组成。

---

• ⑶ 网格区域的 属性值

  • ① 不设置 网格区域: none
    • 网格容器 没有定义 任何的网格区块(grid areas)。
  • ② 字符串: +
    • 一个字符串 = 一行 ⇒ 每一个 给定的字符串 会生成一行。
      • 字符串之间 ⇒ ❶ 空格分隔。
    • 字符串中 空格分隔的字符 = 列 ⇒ 一个字符串中 用空格分隔的每一个单元格(cell)会 生成一列，"a a b"，表示 1行3列。
      • 字符串中的 每个单元格 创建列。
      • 单元格之间 ⇒ 也是 ❶ 空格分隔。
    • (相邻的) 同名单元格 = 网格区域 = 网格区域 ⇒ 多个同名的，跨越相邻行或列的单元格 称为网格区块(grid area)。
    • 矩形: 非矩形的网格区块 是无效的 ⇒ 同名单元格 必须相邻 (上下相邻/左右相邻)。

  ---

  • 示例1: 两行 grid-template-rows: auto auto; + 三列 grid-template-columns: 1fr 1fr 1fr; + 划分区域和命名 grid-template-areas: "left right-up right-up" "left right-down right-down";
    • 先有行列，再划分区域: 注意，先设置显式行列轨道，再设置区域划分和命名，否则可能测试时 Firefox 会不显示区域名称。
      • 字符串里面的两行三列 和 设置行列轨道的两行三列相对应。
      • 
      • 在 Firefox 浏览器中 可以查看网格线和网格区域名
        • 

---

• ⑷ 网格区域的 浏览器支持
  • 

---

4. grid-auto-rows 属性: 设置 隐式行轨道的大小

• ⑴ 设置 隐式创建的行轨道大小: grid-auto-rows 属性
  • ① 隐式轨道:
    • 定义1: 显式生成之外的 轨道，都是隐式生成的轨道。
      • 如果 网格项 没有使用 grid-template-rows 来显式指定 所在行的行轨道的大小，则会隐式创建网格轨道 来保存它。
      • 即所有轨道 都默认是 隐式轨道，只有用 grid-template-*显式设置轨道大小后，才变成显式轨道。
    • 定义2: 任何 自动生成的网格轨道，称为 隐式网格轨道。
  • ② 创建 隐式轨道: 当 ❶ 网格项目 多于网格中的单元格 或网格项目 ❷ 放置在 显式网格之外时，将创建 隐式轨道。
    • 隐式生成轨道: 隐式生成轨道的原因 ⇒ 会因为 显式地定位到 ❶ 超出范围的 轨道，或者通过 ❷ 自动放置算法 创建额外的行。共同点，都在显式创建的行轨道之外 还要一些空间，此时则会 隐式地创建行。
  • ③ 初始值: auto 自动分配大小
  • ④ 适用对象: 网格容器 (grid containers)
  • ⑤ 被继承性: no

---

• ⑵ 隐式行轨道的 语法

  • grid-auto-rows: | | min-content | max-content | auto | | minmax(min, max) | fit-content()
  • 8个属性值
  • 相比 设置显式轨道的grid-template-rows，少2个参数，❶ none(默认不生成显式轨道，默认轨道是隐式的)和 ❷ repeat() 轨道重复函数，不能在隐式轨道上使用 (为什么?不支持?);

• ⑶ 合法值

/* 关键字值 Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* 长度值  values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* 百分比值  values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* fr 单位值 按比例分配   values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* 设置范围值 minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* 多个轨道尺寸值 multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* 全局值 Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: unset;

• ⑷ 隐式行轨道的 属性值

  • ① 长度值:
    • 示例1: 显式创建 一行两列: grid-template: 100px / 1fr 1fr; ⇒ 4个网格项 需要2行 ⇒ 第2行是隐式创建，默认值为grid-auto-rows:atuo;，即自动分配空间
      • 
    • 示例2: 设置第2行 = 即 隐式行轨道的尺寸 : grid-auto-rows: 150px;
      • 
  • ② 百分比值(相对高度值):
    • 示例1: 网格容器没有设置高度height ⇒ 此时百分比值 = auto值 = 默认尺寸。
      • 
    • 示例2: 设置了高度值，百分比值才有效: height: 500px; + grid-auto-rows: 30%;
      • 
      • 示例3: 设置两行 隐式创建的行: height: 500px; + grid-auto-rows: 30%;
        • 
      • 示例4: 设置两个尺寸，循环使用: height: 500px; +grid-auto-rows: 30% 100px;
        • 
  • ③ 最大的 最小内容: min-content
    • 表示 占据网格轨道的 网格项的 最大的最小内容。
      • 关键字详解，见本文最底部 友情链接。
  • ④ 最大的 最大内容: max-content
    • 表示 占据网格轨道的 网格项的 最大的最大内容。
      • 关键字详解，见本文最底部 友情链接。
  • ⑤ 默认值，最大或最小内容: auto ⇔ 根据内容 自动创建
    • 是一个关键字
    • 如果它是一个最大值，则它与max-content相同。
    • 作为最小值，它表示 占用网格轨道的网格项的 最大的最小尺寸(由最小宽度/最小高度 min-width/min-height指定)。
  • ⑥ fr单位 按比例分配:
  • ⑦ 设置为 指定范围内的值: minmax(min, max)
    • 详解见 minmax() 函数详解。
  • ⑧ 大小可缩放， 但最大 不超过某个限定值: fit-content()
    • 详解见 fit-content() 函数详解。

• ⑸ gird-auto-rows 的浏览器支持

  • IE 使用非标准名称:-ms-grid-rows
  • 安卓版 Firefox 不接受多个属性值。
  • 

---

5. grid-auto-columns 属性: 设置 隐式列轨道的大小

• ⑴ 设置 隐式创建的列轨道的尺寸: grid-auto-columns 属性
  • ① 隐式列轨道: 如果一个网格项 没有被定位到 grid-template-columns 显式指定的列中，那么将创建 隐式网格轨道来保存它。
    • 换言之，grid-template-columns 显式创建的 列轨道之外的列 = 隐式列轨道。
    • 创建 隐式列轨道:如果没有使用 grid-template-columns 属性，那么所有的列轨道 都是隐式列轨道。
  • ② 初始值: auto 自动分配空间
  • ③ 适用元素: 网格容器(grid containers)
  • ④ 被继承性: no ⇒ 不被子元素 自动继承

---

• ⑵ 隐式列轨道大小的 语法

  • grid-auto-columns: | | | min-content | max-content | auto | minmax(min,max) | fit-content( [ | ] )
  • 8种属性值
  • 示例1:
  • ① 默认样式
    • 
  • ② 设置隐式列轨道: 未设置 显式列轨道 grid-template-columns， grid-auto-columns: 150px; ⇒ 默认仅一列。
    • 
  • ③ 两个列值:grid-auto-columns: 150px 100px; ⇒ 在 Firefox72, Google 78 中测试 只能识别 第一个列值 。 ⇒ 默认仅一列值 有效。没有指定 列轨道个数时,可能会默认仅一列。
    • 
    • ④ 指定区域名称 和 行列数 grid-template-areas: "a a a"; + grid-auto-columns: 150px 100px; ⇒ 此时，两个列值有效 循环使用。
      • 

• ⑶ 隐式列轨道大小 浏览器支持

  • IE 使用非标准名称: -ms-grid-columns
  • 安卓版 Firefox 目前不支持 多个列值。
  • 

• 合法值

/* 关键字值  Keyword values */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/* 长度值  values */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/* 百分比值  values */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/* 按比例分配 fr单位值  values */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/* minmax() values */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/* fit-content() values */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/* 多个值 multiple track-size values */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* 全局值 Global values */
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: unset;

---

6. grid-auto-flow 属性: 设置 自动布局元素的排列方式 (逐行/逐列排列, 搭配 grid-row,grid-column 属性 )

• ⑴ 设置 自动布局元素的排列方式: grid-auto-flow 属性
  • 控制着 ❶ 自动布局算法 的运作方式，精确指定 在网格中 ❷ 被自动布局的元素 怎样排列。
  • ① 自动布局元素: 没有使用属性 明确指定 位置的 元素/网格项(grid items)，是自动布局元素。
  • 如何指定 元素/网格项的位置?
    • 非自动布局元素: 一般会使用 grid-row,grid-column，grid-row-start,gird-row-end... 指定元素的放置位置，使用这些属性 指定位置的元素，就不再是"自动布局元素"。
  • ② 初始值: row ⇔ 没有指定位置的网格 ，默认按照通过❶ 逐行填充 来排列元素，在必要时 ❷ 增加新行。
  • ③ 适用元素: 网格容器 (grid containers)
  • ④ 被继承性: no ⇔ 否，不会被子元素 自动继承。

---

• ⑵ 自动布局元素 排列方式的 语法
  • grid-auto-flow: [ row | column ] || dense;
  • 3 种属性值

---

• html

<div class="gridcontainer">
    <div class="griditem1 green">one: 不怨天尤人，div>
    <div class="griditem2 red">two: 不恶语伤人，div>
    <div class="griditem3 green">three: 群处守嘴，div>
    <div class="griditem4 red">four: 独处守心。div>
div>

• css

/*网格容器*/
.gridcontainer{
     
    width: 30%;
    /*height: 500px;*/
    /*height: 500px;*/
    border: solid 5px lightseagreen;
    margin: 10px;
    display: grid;
	grid-template: repeat(4,1fr) / repeat(2,1fr); /*4行2列*/
    grid-auto-flow: row;
    /*grid-auto-flow: row dense;*/
    /*grid-auto-flow: column;*/
    /*grid-auto-flow: column dense;*/


}
/*指定网格项1的放置位置 第1列 行线2-5之间*/
.griditem1{
     
    grid-column: 1;
    grid-row: 2/5;
}
/*指定网各项2的放置位置: 行线1-3之间*/
.griditem2{
     
    grid-row: 1/3;
}
/*网格项*/
.gridcontainer div{
     
    border: solid 5px #bed5cb;
    margin: 10px;
    padding: 10px;
    font-weight: bold;

}

.green{
     
    background-color: #c4ffcd;
}
.red{
     
    background-color: #ffdcdd;
}

• ⑶ 自动布局元素 排列方式的 属性值 (示例图 代码如上 ↑)

  • ① 逐行填充 (默认值): row

    • 指定自动布局算法 按照通过 ❶ 逐行填充 来排列元素，在必要时 ❷ 增加新行。
      • 如果既没有指定 row 也没有 column，则默认为 row。
    • 第3项 为什么排在第一个位置?
      • 高度 足够放在左上角那个网格中,且是 第一个"没有指定具体位置的 自动布局的元素"因此放在最前。
      • (虽然这里 省略dense关键字，默认是 不能回头填充空白的， 但因为逐行排列 “自动布局的元素”，所以 把第3个元素放在了 刚好适合的 第1个位置，因为第3个元素 才是第1个"自动布局的元素"，理应填充在第1行，第1,2两项是指定位置的元素，不是自动布局的元素。)
    • 

  • ② 逐列填充: column

    • 指定自动布局算法 通过 ❷ 逐列填充 来排列元素，在必要时 ❷ 增加新列。
    • 没有回头填充 第一个位置的空白。
    • 
    • grid-auto-flow: column dense; ⇒ 回头填补 第一个位置的空白了。
    • 

  • ③ 回填空白+次序可能打乱: dense，美 /dens/ ，稠密的

    • 回填 前面的空白: 指定自动布局算法使用一种 ❶ “稠密”堆积算法，如果后面出现了 稍小的元素，则会试图 去填充网格中 ❶前面留下的空白。这样做会填上 稍大元素留下的空白，使网格尽可能稠密紧凑，但同时也可能导致 原来出现的 ❷ 次序被打乱。
      • ⇒ 属性值dense 仅改变 ❶ 视觉顺序，会导致 DOM 属性和 元素的实际呈现顺序 不一致，不利于可访问性，需要谨慎使用。
      • 默认 不回填空白: 如果省略它，使用一种❷ 「稀疏」算法，在网格中布局元素时，布局算法只会❷ 「向前」移动，永远 ❸ 不会倒回去 填补空白。
      • 这保证了 所有自动布局元素 ❹ 「按照次序」出现，即使可能会留下 被后面元素填充的空白。

• ⑷ 属性值的取值和合法值

  • 可取单个值 ⇒ 个关键字：row、column，或 dense 中的一个。
  • 可取两个值 ⇒ 两个关键字：row dense 或 column dense。
  • 合法值 ↓

/* 关键字值 Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;/*双值,先水平 后垂直，视觉顺序同 row 属性。*/
grid-auto-flow: column dense;/*双值，先上下 后左右*/

/* 全局值  Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;

• ⑸ 自动布局元素 排列方式的 浏览器支持
  • 

---

7. gap (grid-gap) 属性: 设置网格的 行轨道间隔和列轨道间隔(简写属性,适用于网格容器)

• ⑴ 设置网格的行间距和列间距:
  • gap 属性 是用来设置 网格行与列之间的间距（gutters），该属性是 行间隔 row-gap 和列间隔 column-gap 的简写形式。
• ⑵ 属性名的 改变/替代: 去掉 grid 网格前缀
  • 最初是用 grid-gap 属性来定义的，目前逐渐被 gap 属性替代，因为不仅仅是 用于网格之间的间隔了，别的内容也在使用 这个间隔属性，所以去掉grid的前缀特指。
  • 两个子属性也是同理，逐渐去除了 grid的网格特指,变成 row-gap和column-gap。

---

• ⑶ 子属性和初始值:

  • ① 无行轨道间隔: row-gap: normal ，normal表示 一般默认是无间隔的。
  • ② 无列轨道间隔: column-gap: normal，normal表示 一般默认是无间隔的。
  • normal属性值: 表示间隔宽度。在 多列布局 时默认间隔为 ❶ 1em，其他类型布局默认间隔为❷ 0。
  • 

• ⑷ 适用元素: (子属性row-gap/ column-gap和这个相同)

  • ❶ 多列元素 (multi-column elements), ❷ 可伸缩容器 (flex containers), ❸ 网格容器 (grid containers)
  • 被继承性: no ⇔ 不会被子元素 自动继承。

---

• ⑸ 网格间距的属性值
  • ① 先行后列,可省略列间距
    • 表示 row-gap 和 column-gap 的值，空格分隔。
      • 而 列间距 column-gap是可选的，缺失的话，则会被设置成跟 行间距 row-gap一样的的值。
    • 1个值，表示 行列间隔值相同。
  • ② 属性值类型: 都可以用 长度值 或者 百分比来表示。
    • ❶ 长度值 :
      • 网格线之间的 间隙宽度。
    • ❷ 百分比值
      • 网格线之间的间隙宽度，相对 ❶ 网格容器 的百分比。
• ⑹ 属性值 语法
  • ① 单值语法: grid-gap: 5px; ⇔ 网格 行列间距相同
    • 
  • ② 双值语法: grid-gap: 5px 20px;先行间隔 后列间隔，空格 分隔行列。
    • 

    grid-gap: 5px;/*设置网格间距,行列间距相同*/
    grid-gap: 5px 20px;/*先行后列*/
    gap: 10px;
    gap: 10px 10%;/*会覆盖 grid-gap 的语法*/

• 网格间距的浏览器支持
  • 一些浏览器中 需要使用非标准属性 grid-gap 替代 新属性gap
  • 目前在弹性布局中 支持度不好,在网格布局和多列布局中支持度较好
  • 

---

7.1 row-gap (grid-row-gap) 属性: 行之间的 间隔大小

• ⑴ 设置 行之间的间隔(gutter)的大小: row-gap

  • gutters，表示 内容轨道的间距。
  • 如何创建 轨道间隔?
    • 使用column-gap、row-gap或 gap属性在CSS网格布局中创建。
  • 属性替代和前缀: grid-row-gap 属性最初在网格布局中 来使用的，现在使用的范围更广了，所以逐渐被 row-gap 替代，不再强调grid的前缀。但是，为了兼容那些不支持 row-gap属性的浏览器，有时仍然需要使用带有grid前缀的属性。

• ⑵ 行轨道之间的间距 属性值

  • 长度值或百分比值 (相对于 网格容器)
  • 长度值: row-gap: 10px; / grid-row-gap: 10px;
    • 
  • 百分比值: row-gap: 50%; / grid-row-gap: 50%;
  • 

• 点击查看 row-gap 的浏览器支持

7.2 column-gap (grid-column-gap) 属性: 列之间的 间隔大小

• ⑴ 设置 元素列之间的 间隔 (gutter) 大小: column-gap

  • 设置元素 列之间的间隔大小,不仅仅是网格布局，同样适用于多列布局和弹性布局。
  • 设置网格列轨道之间的间隔
    • column-gap: 10px; / grid-column-gap: 10px;
    • 

• 点击查看 column-gap 的浏览器支持

  • 在弹性布局中 支持度不好,在网格布局和多列布局中支持度较好。

---

8. grid-area 属性: 指定 放置网格项的 区域 (行列起止位置)

• ⑴ 指定 放置网格项的 区域 (行列起止位置): grid-area
  • ① 简写属性: 该属性是 grid-row-start、grid-row-end、grid-column-start、和 grid-column-end的简写。
    • 指定 网格项在网格中的位置，从而指定网格项的大小。
    • 如何指定位置?
      • 方法是为 其网格布局指明行列的开始线和结束线、行列的跨度span 或什么都不提供(默认自动auto)，从而指定网格项 应该占据的 区域位置。
  • ② 子属性和初始值
    • grid-row-start: auto
    • grid-column-start: auto
    • grid-row-end: auto
    • grid-column-end: auto
  • ③ 适用对象 :
    • ❶ 网格项 grid items ， ❷ 包含块是一个网格容器的 绝对定位的盒子 absolutely-positioned boxes
  • ④ 被继承性 : no

---

• ⑵ grid-template-areas 和 grid-area 属性的区别
  • ① grid-template-areas : 划分 当前网格容器，把容器划分成 ❶ 几块区域，并把这些区域命名，针对的是 ❷ 网格容器。
  • ② grid-area: 划分出❶ 一个区域 给 当前网格项，用来放置网格项，针对的是 ❷ 网格项。
  • 必须先使用 grid-template-areas 属性进行区域的划分和命名，然后才能使用grid-area属性让 某个 grid网格子项 使用这些区域中的 指定一部分。
  • 也可以不使用区域名，直接使用行线，列线的名称 划分出一个区域给网格项。
• ⑶ 属性的语法

 [ /  ]{
     0,3}
where 
 = auto |  | [  && ? ] | [ span && [  ||  ] ]

• ⑷ 属性值的个数: 1~4个 属性值，分别表示 grid-row-start、grid-row-end、grid-column-start、和 grid-column-end，每个子属性值之间，使用分隔符号 斜杠 /。

  • 4值语法: grid-area: ❶ grid-row-start/ ❷ grid-column-start/ ❸ grid-row-end/ ❹ grid-column-end;
    • 奇行偶列
      • (1,3) 第 1个值和第 3个值，表示 行的开始和结束 。
      • (2,4) 第 2个值和第 4个值，表示 列的开始和结束。
    • 先开始，后结束。前两个值，第1，2个值是起始位置，后面两个表示结束位置。
      • 如果指定了四个值，则将 grid-row-start设置为第一个值，将grid-column-start设置为第二个值，将grid-row-end设置为第三个值，将grid-column-end设置为第四个值。
  • 3值语法: 省略4, 4=2,
    • 当 grid-column-end 第4个值 被省略时，如果 grid-column-start 是一个 ，则4=2==指定线名或区域名，则将 grid-column-end设置为该 ;否则，如果2 也被省略，则 2=4=初始值 = auto，即将第4个值设置为auto。
    • ，表示 用户自定义标识符 = 自定义的字符串，在这里为指定的网格区域名或者自定义行线和列线名称。
  • 2值语法: 省略3，
  • 当grid-row-end 即第3个值 也被省略时，与上同理，3=1==指定自定义线名或区域名，1 也被省略时，1=3=初始值 = auto。
  • 1值语法: 当忽略 grid-column-start 即忽略第2个值时，如果grid-row-start是一个，则所有四个值 都设置为该值。否则，将其设置为auto。
    • 很显然，只有一个属性值时，表示 4个值都相同，1=2=3=4=，或者 1=2=3=4=auto。

• 每个属性值的类型

  • ① 跨度为1+自动放置: grid-area: auto; 初始值，表示 自动放置 或 默认跨度为1。
  • ② 指定区域名或自定义名称的 行线/列线: grid:
  • ③ 指定 默认的或者指定名称的 第 n 个行线/列线: grid: && ?
    • 整数: 将第n个网格线 用作指定网格项目的位置。
      • 值为0的整数无效。
    • 负整数: 如果给定一个 负整数，它将从显式网格的末端边缘 开始 倒数计数。
    • 指定名称的行: ? 表示可选的，如果名称是，且是 整数 自定义字符串的形式，则只计算具 有该名称的行。如果没有足够多 的具有该名称的行存在，则假定 所有隐式网格线 都具有该名称，以便查找此位置。
  • ④ 指定跨越的行数/列数: grid: span && [ || ]
    • 网格跨度: span 表示 为网格项目的放置 提供一个网格跨度，使网格项目的网格区域的对应边缘 是来自相反边缘的 n 条线。
    • 如果指定名称是叫 ，则只计算具有 该名称的行。如果没有足够多的具有该名称的行存在，则假定与搜索方向对应的显式网格一侧的 所有隐式网格线都具有该名称，以便计算这个跨度。

• 指定网格项的位置 在行线为2~4之间,列线 3~4之间

  • grid-area: 2/3/4/4;
  • 第(1,3)个值指定行线的起止，第2,4个值指定列线的起止。
  • 
  • 指定从第2行开始，所在列=d区域的所在列: grid-area: 2/d;
    • 
  • 把网格项放在 名称为c的区域: grid-area: c;
    • 
  • 设置网格项 行列的起始位置和跨度: grid-area: 2/1/span 2/span 3;
    • 

---

8.1 grid-row-start 属性: 放置网格项的 行的起始位置

• 指定网格项在 网格行中的起始位置，方法是为其网格布局提供一个行线、一个跨度span或nothing(默认自动auto)，从而指定 网格项在网格区域中的 起始边缘。

• 初始值: auto

• 适用对象 :

  • ❶ 网格项 grid items ， ❷ 包含块是一个网格容器的 绝对定位的盒子 absolutely-positioned boxes

• 被继承性 : no

• 属性的语法

<grid-line>
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

/*网格容器*/
.gridcontainer{
     
    width: 30%;
    /*height: 500px;*/
    /*height: 500px;*/
    border: solid 5px lightseagreen;
    margin: 10px;
    display: grid;
    grid-gap: 5px;/*设置网格间距,行列间距相同*/
     /*设置显式的行列轨道*/
    grid: repeat(3,100px)/1fr 1fr 1fr;
}
/*第2个网格项*/
.griditem2{
     

    grid-row-start: auto;
}

• 示例值
  • grid-row-start: auto ⇒ 自动放置，即默认的放置位置，默认跨度为1。
  • 

---

• grid: ; 设置网格项2 从c区域的起始行开始
  • 如果有一个名为“-start”的指定行，它将第一个这样的行 提供给网格项 作为 起始的位置。
  • c-start = 第2个行线 ⇒ 第2项 的起始行 = 第2行
  • 隐式 命名行的自动生成: 命名网格区域 自动生成 隐式命名行。
    • 这里没有显式指定 c-start的行线，只命名了 c 区域，但c区域的开始行，会被隐式指定为 c-start的行线，除非在它之前显式地指定了另一个行线c-start，此时就不会再隐式指定该区域的起始行为 c-start。
  • 

/*网格容器*/
.gridcontainer{
     
    grid: repeat(3,100px)/1fr 1fr 1fr;
    grid-template-areas: "a b b" "a c c" "a d d";
}
.griditem2{
     

    /*grid-row-start: auto;*/
    grid-row-start: c;
}

---

• 指定第 n个行线 为起始行: grid: && ?
  • 之所以可以指定 第n个行线，是因为网格会按数字顺序，自动生成 行线的名称。分别正序和负的倒序两种命名: 1,2,3...n..或-n,...-3,-2,-1，所以此处的整数的取值，可以取 正整数或者 负整数，但不可以取0，因为没有名称为0的行线。
  • 如果 网格区域的名称是，则只计算 具有该名称的行。如果没有足够多的具有 该名称的行存在，则假定 所有隐式网格线都具有该名称，以便查找此位置。
  • 
  • 设置起始行的行线: grid-row-start: 3; ⇔ 从第三行开始
    • 
  • 设置指定区域的行线: grid-row-start: 2 c;
    • 此处指定了行的区域名称，c，但是并没有从c区域的第2行，即第3行开始，反而是从隐式行的第2行 (即第6行)开始，因为没有显式指定 c区域的行线名，所以不在搜索范围之内 ?
    • 
• 设置跨行的行数: grid-row-start: span && [ || ]
  • 如果省略整数，则默认为跨的行数为 1。负整数 或 0无效。
  • 第2项 跨两个行轨道: grid-row-start: span 2;
  • 
• 设置负值的起始行: grid-row-start: -1;
  • 
  • grid-row-start: -2;
  • 

---

8.2 grid-row-end 属性: 放置网格项的 行的结束位置

• 属性 指定网格项在网格行中的 结束位置
• 初始值: auto = 跨行数为1，且自动放置。
• 适用对象 :
  • ❶ 网格项 grid items ， ❷ 包含块是一个网格容器的 绝对定位的盒子 absolutely-positioned boxes
• 被继承性 : no
• 属性语法

<grid-line>
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

• 指定结束位置为 第3个行线: grid-row-end:3;
  • 
• 指定跨3行: grid-row-end: span 3;
  • 

8.3 grid-column-start 属性: 放置网格项的 列的开始位置

• 属性指定 网格项在网格列中的起始位置
• 属性语法

<grid-line>
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

• 设置网格项从第3列线开始: grid-column-start: 3;
  • 
• 设置跨列数为2列: grid-column-start: span 2;
  • 

8.4 grid-column-end 属性: 放置网格项的 列的结束位置

• CSS 属性 指定网格项 在网格列中的结束位置
• 属性语法

<grid-line>
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

• 设置结束位置为第4列线: grid-column-end: 4;
  • 
• 指定跨列数为 3 列: grid-column-end: span 3;
  • 

---

9. grid-column 属性: 集中定义网格项 列的开始和结束位置 (简写属性)

• column，美 ['kɑləm]， 列

• 指定 网格项的大小和位置: 集中定义网格项 列的开始和结束位置 (简写属性)

• 简写属性: grid-column是 grid-column-start 和 grid-column-end

• 子属性和初始值:

  • 默认的自动放置: grid-column-start: auto
  • 默认的自动放置: grid-column-end: auto

• 初始值: auto = 跨行数为1，且自动放置。

• 适用对象 :

  • ❶ 网格项 grid items ， ❷ 包含块是一个网格容器的 绝对定位的盒子 absolutely-positioned boxes

• 被继承性 : no

• 属性值语法

  • 属性值个数: 1~2个
  • 如果给定两个<网格线>值，它们之间用 斜杠“/”分隔，先设置列的开始位置，后设置列的结束位置。

<grid-line> [ / <grid-line> ]?
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

• 从第3列开始: grid-column: 3;

  • 
  • 从第2列线开始，在第4列线结束: grid-column: 2/4;
  • 

• grid-column 的 浏览器支持

  • 

---

10. grid-row 属性: 集中定义 放置网格项的 行的开始位置和结束位置(简写属性)

• 简写属性: grid-row 是 grid-row-start 和 grid-row-end的简写属性
  • 可指定 网格项的 大小和位置。
  • 子属性和属性值
    • grid-row-start: auto
    • grid-row-end: auto
• 属性值语法

<grid-line> [ / <grid-line> ]?
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

• 网格行的属性值
  • 属性值的个数: 1~2个
  • 如果指定了两个<网格线>值，先设置网格行的开始位置，再设置网格行的结束位置。
  • 从第2行开始: grid-row: 2;
  • 
  • 从第1行开始，跨3行: grid-row: 1/span 3;
  • 
  • 从c区域的开始行 开始，到d区域的结束行 结束: grid-row: c/d;
    • 

---

11. 网格布局中的 CSS 数据类型 和 函数

11.1 网格布局中涉及的 新 CSS 数据类型

• 网格布局中涉及的 CSS 数据类型
  • 数据类型
  • 表示: 网格的可变长度:按比例 划分空间
    • CSS 数据类型 表示了网格（grid）容器中的 ❶ 一段 可变长度。于 grid-template-columns、grid-template-rows及相关属性中使用。
  • 可变长度= 数字+fr:
    • 数据类型为 一 数字后 加单位 fr。与所有 CSS 尺寸相同，单位与数字间 无空格。
• 网格相关的 特殊 长度单位: 按比例 划分空间的 长度单位
  • 轨道可以使用 任何长度单位 进行定义。
  • 网格相关的 特殊的长度单位: 新的 fr 单位 ⇔ 表示网格容器中 ❶ 可用空间的 一等份。
    • 创建三个 等宽的轨道，它们 根据可用空间的大小 进行扩展和收缩。
      • grid-template-columns: 1fr 1fr 1fr;
    • 混合了 绝对尺寸的轨道 与 分数单位轨道,第一个轨道是500像素 ⇒ 这个固定宽度 被从可用空间中取走 + 剩下的空间 被分为三份，按比例分配 给了两个弹性尺寸轨道。
      • grid-template-columns: 500px 1fr 2fr;
  • 浏览器支持
    • 
• 有效数据

1fr    /* 使用整型 */
2.5fr  /* 使用浮点 */

11.2 网格布局 相关 CSS 函数

⑴ repeat() 函数: 设置 轨道的重复次数

• repeat() 函数的浏览器兼容性
• 语法

repeat(auto-fill|auto-fit|positive-integer,??)
 =  | %  |  | min-content | max-content | auto|  minmax(min,max) | fit-content()`

• 参数

  • ① 需要重复的次数: positive-integer
    • 当知道 需要重复的次数时，直接设置 一个具体的正整数 进行重复操作。
      • grid-template-rows: repeat(4,1fr) ⇔ grid-template-rows: 1fr 1fr 1fr 1fr;
  • ② 自动计算 重复次数: auto-fill ⇒ 当不知道 需要重复的次数时，即不知道究竟有多少列或多少行时，可以根据 网格布局中 每一个子项的大小， 自动计算出 需要重复的次数。

    • 不溢出网格的最大 重复次数: 如果 网格容器的 行或列的相关轴上 有一个确定的大小，则重复次数 是不会导致网格内容溢出 网格容器的 最大可能正整数。

      • 自动重复+设置宽高值+讨厌的关键字 auto: 在使用重复函数 repeat() ，并进行自动计算重复次数时，即参数为 auto-fill/auto-fit时，要设置 高度值或宽度值，且repeat() 函数不可以和auto一起使用，这样方便 自动计算重复次数，当重复次数时具体数字，不是自动重复时，repeat()函数可以和auto一起使用。

    • 当未设置 容器高度,行轨道只会重复一次: grid-template-rows: repeat(auto-fill,150px) 100px;

      • 

    • 容器设置了高度: grid-template-rows: repeat(auto-fill,150px) 100px;+height: 500px;

      • 行轨道在高度范围内，自动重复了2次
      • 
  • ③ 自动计算 重复次数+合并空轨道: auto-fit
    • 合并空轨道: auto-fit的行为与auto-fill相同，区别是，在放置网格项之后，任何空的重复 轨道都会被折叠。
    • 空轨道: 是指没有在其上放置 或跨越流入的 网格项的轨道。(如果所有轨道 都是空的，则会导致 所有轨道都被折叠。)
      • 折叠的轨道 ，是被视为具有单一的固定轨道大小 ❶ 0px，并且其两侧的 ❷ 间隔折叠。
    • 示例1: 在auto-fill自动填充的时候，如果 网格容器的尺寸很大，则最后会有一些空的格子占位：
      • 网格容器宽度900px，grid-template-columns: repeat(auto-fill,150px);
      • 
    • auto-fit 自动适应的时候，如果 网格容器的尺寸很大，则最后会有一些空的格子 会合并成1个，且宽度是0 ⇒ 当 网格容器尺寸 没有富余的时候，两者表现是一样的。
      • 
    • 为了查找 自动重复轨道的数量，用户代理 将轨道大小 限制为用户代理指定的值(例如1px)，以避免 被零除。

• 自动重复 排斥的关键字: 当我们使用 auto-fill 自动填充的时候，repeat() 函数是不能和 auto一起使用的，因为auto无法确定具体尺寸，不好确定 重复次数。可以和 长度/百分比值一起使用。但当重复次数 是具体的数字时1,2,3…时，是可以和auto一起使用的。

  • 下面这种写法 是无效的：

.container {
     

    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) auto; /*无效写法*/
    grid-template-columns: repeat(3, minmax(100px, 1fr)) auto; /*有效写法*/
}

• 合法值

/* 重复的轨道  values */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/*  values */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/*  values */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

• grid-template-columns: repeat(2, 50px 1fr) 100px;

  • 

• 轨道重复的 使用示例

• 指定轨道的 重复次数: repeat(次数，轨道尺寸)

  • ① 单轨道 重复多次: 使用 repeat() 函数来重复 部分或整个轨道列表
    • e.g.1: grid-template-columns: 1fr 1fr 1fr; ⇔ grid-template-columns: repeat(3, 1fr);
    • 起始轨道为20px，接着重复了6个1fr的轨道，最后再添加了一个20px的轨道。
      • e.g.2: grid-template-columns: 20px repeat(6, 1fr) 20px;
  • ② 多轨道 重复多次: 创建一个 多轨道模式的重复轨道列表: 网格将有共计10个轨道，为1个1fr轨道后面跟着1个2fr轨道，该模式重复5次。多轨道之间，空格 分隔。
    • grid-template-columns: repeat(5, 1fr 2fr);
  • ③ 多个函数 同时使用
    • 前两列占据20%，后两列占据30%: grid-template-columns: repeat(2,20%) repeat(2,30%) ;
    • 
  • ④ 重复轨道的同时，对网格线命名
    • grid-template-columns: repeat(3,[col1-start] 1fr [col2-start]);+ 网格项2 设置 grid-column-start: col1-start;
    • 

• 使用 注意事项

  • repeat() 函数 只在 设置显式行列轨道的 grid-template-columns和 grid-template-rows 属性上使用，不能在隐式轨道属性上使用。
  • 针对 Firefox 浏览器，repeat(auto-fill, ...) 和 repeat(auto-fit, ...) 两个关键字 目前只 支持在列上grid-template-columns 属性中 使用，其他浏览器 基本上 行列都可以正常使用。

---

⑵ minmax(min, max) 函数: 限制 轨道大小 取值的范围

• 同时设置 最小值和最大值: minmax(min, max)，表示 当前的轨道大小是 在最小值min到最大值max之间的一个数值。
• 语法

minmax(min, max)
minmax( [  |  | min-content | max-content | auto ] , [  |  |  | min-content | max-content | auto ] )

• 参数
  • ① 可以是长度值，百分比值，或↓
  • ② auto 出现在 min 的参数位置，则作用等同于min-content，如果出现在max参数位置，作用等同于max-content。
    • min-content和max-content的具体含义，参见【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】 。

.container {
     
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

• 其中 minmax(150px, 1fr) 的含义是 每一个列的宽度最小值是 150像素，最大值是 1fr ，也就是 等分宽度。
  • 假设容器现在的宽度 是500像素，此时得出，分为3列，且 每一列的宽度 应该是166.67px。
  • 因为每一列的最小宽度 要求是 150像素，应该至少有 500/150 列，即3.33列，即3列，就能满足最小值要求，由于有 1fr 的最大宽度值限制，表示要等分，因此，每一列的宽度是 3列等分尺寸， 500px/3=166.67px，这个值 可以同时满足最小值和最大值的限制条件。
  • 
• 使用 注意事项:
  • ① minmax(min, max)中，如果 min的计算值比max还要大，则max的值会被忽略，因为这个最大值是无效的。
  • ② 可变长度的数据类型 不能作为min参数使用，可能因为按比例分配 长度可变的话，就无所谓最小值了。
  • ③ minmax() 函数 只在下面4个CSS属性中：
    • 设置 显式行列的轨道大小: grid-template-columns / grid-template-rows
    • 设置 隐式行列的轨道大小: grid-auto-columns / grid-auto-rows

---

⑶ fit-content(limit) 函数: 尺寸 可随容器缩放而缩放，最小值不限制，最大尺寸 不超过 某个限定值

• fit-content()函数的浏览器兼容性

• 作用: 让元素尺寸 可以随容器缩放而缩放，最小尺寸随auto值变化 不限制，最大尺寸不得超过某个限定值。某个限定值是，最大内容max-content和限定值limit二选其一，哪个更小，以哪个为界限。: fit-content()

  • ① 语法: fit-content( [ | ] )
    • 等价于 min(minimum, max(limit, max-content)) (来自 规范文档)⇒ 本质上是计算出的 minmax(auto, max-content) 和 minmax(auto, limit)中的较小值
    • ⇒ 相当于 fit-content(limit) = min(min(auto, limit), min(auto, max-content))
  • ② fit-content() ，表示 在auto,指定 限定值limit，内容的最大内容max-content 中的 取最小值。
    • 参数 auto 的可变性
      • ❶ 当容器宽度很大时，auto默认值会很大 ，当远大于最大内容max-content，最小值 可能取 最大内容max-content(如,一行文本)或者指定的限定值limit中的一个，就看哪个更小。
      • ❷ 如果缩放容器，容器宽度变小时，auto值 是会跟着容器变化 而变小的，auto值最小的时候， 可能会变成最小内容min-content的大小 (如 一个汉字的宽度，一个单词的宽度) ，或者直接完全消失看不见。
      • 示例1: 容器的显式列轨道设置为 grid-template-columns: 80px fit-content(200px);
        • 容器设置为可水平调整的: resize: horizontal;+ overflow: hidden;
        • 第2列使用的fit-content()函数，最大值 limit=200px。
      • ❶ 当max-content > limit 时:
        • 当容器缩小时，第2列的内容 跟着缩小，至完全消失看不见，当容器空间变大时，第2列的宽度跟着变大，但宽度达到200px时就不再跟着变大，会保持在 200px 的宽度。
        • 
      • ❷ 当max-content 时:
        • 宽度达到 max-content的大小时，就不会再跟着变大，会保持在 最大内容值的位置。在本例中，一行文本不换行，最大内容值 max-content = 290px,如果设置 limit=400px，则max-content 更小，会以 max-content为界限值。
        • grid-template-columns: 80px fit-content(400px);，最大值不超过 max-content的宽度
    • min(): 用于比较数值的大小 并取出最小的那个。
    • max(): 用于比较数值的大小 并取出最大的那个。
  • ③ fit-content(limit) 的参数类型: 限定值limit接受 长度值 或 百分比值 作为参数。
    • 百分比值: 相对于 给定轴中 可用空间的百分比。
    • 在网格属性中，它 相对于 ❶ 列轨道中的网格容器的 内联大小 和 ❷ 行轨道的网格容器的 块大小 。
      • 否则，它是相对于 可用的内联大小 或块大小的 布局框 取决于书写模式。
  • ④ fit-content(limit)函数的 可适用属性:
    • ❶ 设置 显式行列轨道大小: grid-template-rows/ grid-template-columns。
    • ❷ 设置 隐式行列轨道大小: grid-auto-rows/ grid-auto-columns。
    • ❸ 用于 repeat()函数中的 第2个参数，作为轨道大小。
    • ❹ 还可以用于布局 盒大小(box size)的各类 宽度，高度 属性。
    • 宽度，高度，最小宽度，最小高度，最大宽度和最大高度width, height, min-width, min-height, max-width , max-height，其中最大和最小尺寸 指的是内容大小(content size)。

/* 长度值  values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* 百分比值  value */
fit-content(40%)

---

♣ 结束语和友情链接

• 参考文档
  • CSS Grid Layout - CSS: Cascading Style Sheets | MDN
  • CSS repeat()函数详细介绍
  • display: grid 布局教程
• 友情链接
  • 【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】
  • 查询 CSS 属性的浏览器支持: Can I use… Support tables for HTML5, CSS3, etc
  • max-content: 详情参见 【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】
  • min-content: 详情参见 【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 喜欢请收藏:喜欢本文 可收藏哦，方便快捷，会持续进行 ❶ 知识点更新 及 ❷ 修正错误。
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢小可爱们 ~╮(￣▽￣)╭

---

• 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
  • 可以备注 支持的理由 或 想对作者说的话哦~
    
• 赞助二维码:
  

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ