【CSS 网格布局 (Grid Layout )】

最新推荐文章于 2023-08-08 22:01:05 发布

Hey_Coder

最新推荐文章于 2023-08-08 22:01:05 发布

阅读量984

点赞数

分类专栏：【CSS】文章标签： grid gird-template 网格布局 grid layout gird-auto-row

本文链接：https://blog.csdn.net/VickyTsai/article/details/103495260

版权

【CSS】专栏收录该内容

28 篇文章 3 订阅

订阅专栏

CSS 网格布局 Grid Layout

- 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 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</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用法一致。详细用法参考 grid-template 属性详解

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

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

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

③ 显式行轨道/ 自动布局方式隐式列轨道: grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?
- 后面带问号 ? ⇔ 表示该项是可选的，可以有,也可以没有。
- 所以显式行轨道 /后面的 ❶ 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-rows>? / <grid-template-columns>

 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: <grid-template> 同时设置显式的行列轨道。
- 剩下的两种涉及到隐式自动布局和隐式轨道的，都是当显式轨道之外还想设置轨道安放项目时使用,如果显式轨道够用，没有一些无处安放的项目时，就不需要设置隐式轨道和隐式自动布局。

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>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
  - ① 行线/列线的名称: line-names = 自定义字符串标识符
  - ② 轨道大小 : <track-size> ⇔ <length> | % | <flex> | min-content | max-content | auto| minmax(min,max) | fit-content()
  - ③ 显式轨道列表: <explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?
  - ④ ?: 表示可选项。
  - ⑤ 行列轨道大小的前后可以设置行线和列线的名称。
    - 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;
- ③ 可选线名+网格区域+行轨道+可选线名+/+列轨道: [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
  - [行线名] “区域名1 区域名2 …区域名n” 行轨道大小 [行线名]/列轨道大小1 列轨道大小2 …列轨道大小n
  - 网格区域: 设 grid-template-areas 为列的 <string>。
  - 行轨道: grid-template-rows 为 <track-size>（默认为 auto）并拼接尺寸前后所定义之行。
  - 列轨道: /之后为 grid-template-columns为显式轨道列表<explicit-track-list>（默认为 none）
  - 禁用属性值: 重复轨道 ⇒ repeat()
    - 轨道被用以与“ASCII art”（即字符画，此处指字符串<string>）中行列逐一视觉对齐，因为列的属性值的个数，要对应列轨道的个数，故列轨道列表中不允许重复轨道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 | <track-list> | <auto-track-list> | <line-name-list>?
  - ⇔ none| length | %| <flex> fr | max-content| min-content | minmax(min, max) | auto | fit-content() | repeat() ;
  - 行线名称: <line-names> = '[' <custom-ident>* ']'
    - ① 自定义字符串标识符: <custom-ident>用户自定义字符串标识符。一种 CSS 数据类型；在这里，用来表示设置的行线的名称。
    - ② 要区分大小写: 值不能有任何歧义。
    - ③ 可以由以下6种字符组成：
      - ❶ 字母: (A - Z, a - z),
      - ❷ 十进制数: (0 - 9),
      - ❸ 连字符: (-),
      - ❹ 下划线: (_),下划线
      - ❺ 转义字符: ( \),
      - ❻ Unicode 编码: （格式：转义字符（\）后跟1到6位十六进制数）
      - 注意：id1, Id1, iD1和ID1都是不同标识符，因为标识符是区分大小写的。另一方面，因为可以解码，所有toto\?和toto\3F 是相同的。
    - ④ 禁用值
      - <custom-ident> 不能用单引号或双引号包起来。
      - 此外，第一个字符不能为数字(为什么?)。
        在编译原理中，当分析 123 这个字符串的时候，如果变量名允许第一个字符为数字，分析器就不知道 123该是数值常量还是变量名了。
        字符串解析分类: 编译器在解析程序的时候，读到一个单词的第一个字符就需要知道当前这个单词属于那一类 ⇒ 这样 ❶ 方便于解析，不用回溯。(存疑,尚待证实)
      - 开头的连字符-只能跟字母: 字符串的开头不能是连字符 (-)后面跟着数字或连字符，可以是连字符后面跟字母。
      - 开头字符: 可以是字母，连字符，下划线，反斜杠，只有数字不可以做开头，一般都是字母开头的。
    - ⑤ 字符串标识符和字符串的区别: 需不需要双引号/单引号。标识符不需要引号。
有效值

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

/* 轨道列表值 <track-list> 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;

/* 隐式轨道列表值 <auto-track-list> 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 属性决定。
  - 隐式生成的网格
- ② 长度值: <length>
  - 非负值的长度值。(整个元素,包括元素的外边距，都放在行轨道中)
  - grid-template-rows: 100px 50px;
- ③ 百分比值: <percentage>
  - 非负值。
  - 相对于 ❶ 网格容器的 <百分比>。
  - 百分比值和父元素的大小: 未设置具体的父元素大小，百分比值不起作用/无效。
    - 未设置网格容器的大小: 如果网格容器的尺寸大小取决于网格轨道的大小（比如 inline-grid） ⇒ 即如果网格容器的块尺寸是不确定的, 则百分比值将被视为 ❶ auto。
  - 默认书写模式+ 未设置具体的高度值时(未设置 height属性时)
    - 百分比值无效，
  - 设置网格容器具体高度时 ⇒ 百分比值才有效。
    - 容器的高度 height: 500px; + 一个行轨道 grid-template-rows:50%;
- ④ 按比例分配: <flex> 数据类型 ⇔ 可变长度= 数字+fr:
  - 非负值。
  - 用单位 fr 来定义网格轨道大小的弹性系数。
    - 每个定义了 <flex> 数据类型的网格轨道会按比例分配剩余的可用空间。
  - 当外层用一个 minmax() 表示时，它将是一个自动最小值(即 minmax(auto, <flex>) ) 。
  - 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( [ <length> | <percentage>| min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | 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( [ <length> | <percentage> ] )
- 更多详解参见 fit-content() 函数详解。
⑩ 重复轨道: repeat( [ <positive-integer> | auto-fill | auto-fit ] , <linenames>? <track-list> <linenames>? )
- 表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复行的表达式。
- 重复模式: 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| <flex> fr | max-content| min-content | minmax(min, max) | fit-content() | repeat() ;
- 10 类常用的属性值 ↑

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

/* 轨道列表值 <track-list> 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);

/* 自动轨道列表值 <auto-track-list> 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%;
- ④ 可变长度按比例分配的单位: <flex> 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值。
  - 最大值可以设置为网格轨道系数值 <flex>可变长度，但最小值则不行。
    - 更多详情，参见 minmax() 函数详解
  - grid-template-columns:minmax(min-content,1fr) 2fr;
  - 窗口缩小 ⇒ 会随着窗口一起缩小
- ⑧ 自动分配大小: auto
  - 根据容器大小和内容大小自动分配空间:
    - 如果该网格轨道为最大时，该属性等同于 <max-content> ，为最小时，则等同于 <min-content> 。
  - 网格轨道大小为 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( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
  - 详情参见 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 | <string>+;
  - 字符串: <string> 是用来表示 ❶ 一串字符的 ❷ 数据类型。
    - 不能是实体:<string>中不能使用像空格  或者——这样的实体。
    - 引号+万国码字符:<string> 数据类型是由包含在英文双引号（"）或英文单引号（'）中的任意数量的 万国码Unicode 字符组成。

⑶ 网格区域的属性值
- ① 不设置网格区域: none
  - 网格容器没有定义任何的网格区块(grid areas)。
- ② 字符串: <string>+
  - 一个字符串 = 一行 ⇒ 每一个给定的字符串会生成一行。
    - 字符串之间 ⇒ ❶ 空格分隔。
  - 字符串中空格分隔的字符 = 列 ⇒ 一个字符串中用空格分隔的每一个单元格(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: <length> | <percentage> | min-content | max-content | auto | <flex> | 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;

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

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

/* fr 单位值 按比例分配  <flex> 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;

⑷ 隐式行轨道的属性值
- ① 长度值: <length>
  - 示例1: 显式创建一行两列: grid-template: 100px / 1fr 1fr; ⇒ 4个网格项需要2行 ⇒ 第2行是隐式创建，默认值为grid-auto-rows:atuo;，即自动分配空间
  - 示例2: 设置第2行 = 即隐式行轨道的尺寸 : grid-auto-rows: 150px;
- ② 百分比值(相对高度值): <percentage>
  - 示例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单位按比例分配: <flex>
- ⑦ 设置为指定范围内的值: 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: <length> | <percentage>| <flex> | min-content | max-content | auto | minmax(min,max) | fit-content( [ <length> | <percentage> ] )
- 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;

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

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

/* 按比例分配 fr单位值 <flex> 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>

/*网格容器*/
.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个值，表示行列间隔值相同。
- ② 属性值类型: 都可以用长度值 <length>或者百分比<percentage>来表示。
  - ❶ 长度值 <length>:
    - 网格线之间的间隙宽度。
  - ❷ 百分比值<percentage>
    - 网格线之间的间隙宽度，相对 ❶ 网格容器的百分比。
⑹ 属性值语法
- ① 单值语法: 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网格子项使用这些区域中的指定一部分。
- 也可以不使用区域名，直接使用行线，列线的名称划分出一个区域给网格项。
⑶ 属性的语法

<grid-line> [ / <grid-line> ]{0,3}
where 
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

⑷ 属性值的个数: 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-line>值，则将 grid-row-start设置为第一个值，将grid-column-start设置为第二个值，将grid-row-end设置为第三个值，将grid-column-end设置为第四个值。
- 3值语法: 省略4, 4=2,
  - 当 grid-column-end 第4个值被省略时，如果 grid-column-start 是一个 <custom-ident>，则4=2=<custom-ident>=指定线名或区域名，则将 grid-column-end设置为该 <custom-ident>;否则，如果2 也被省略，则 2=4=初始值 = auto，即将第4个值设置为auto。
  - <custom-ident>，表示用户自定义标识符 = 自定义的字符串，在这里为指定的网格区域名或者自定义行线和列线名称。
- 2值语法: 省略3，
- 当grid-row-end 即第3个值也被省略时，与上同理，3=1=<custom-ident>=指定自定义线名或区域名，1 也被省略时，1=3=初始值 = auto。
- 1值语法: 当忽略 grid-column-start 即忽略第2个值时，如果grid-row-start是一个<custom-ident>，则所有四个值都设置为该值。否则，将其设置为auto。
  - 很显然，只有一个属性值时，表示 4个值都相同，1=2=3=4=<custom-ident>，或者 1=2=3=4=auto。
每个属性值的类型
- ① 跨度为1+自动放置: grid-area: auto; 初始值，表示自动放置或默认跨度为1。
- ② 指定区域名或自定义名称的行线/列线: grid: <custom-ident>
- ③ 指定默认的或者指定名称的第 n 个行线/列线: grid: <integer> && <custom-ident>?
  - 整数: 将第n个网格线用作指定网格项目的位置。
    - 值为0的整数无效。
  - 负整数: 如果给定一个负整数，它将从显式网格的末端边缘开始倒数计数。
  - 指定名称的行: ? 表示可选的，如果名称是<custom-ident>，且是 整数自定义字符串的形式，则只计算具有该名称的行。如果没有足够多的具有该名称的行存在，则假定所有隐式网格线都具有该名称，以便查找此位置。
- ④ 指定跨越的行数/列数: grid: span && [ <integer> || <custom-ident> ]
  - 网格跨度: span 表示为网格项目的放置提供一个网格跨度，使网格项目的网格区域的对应边缘是来自相反边缘的 n 条线。
  - 如果指定名称是叫 <custom-ident>，则只计算具有该名称的行。如果没有足够多的具有该名称的行存在，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称，以便计算这个跨度。
指定网格项的位置在行线为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: <custom-ident>; 设置网格项2 从c区域的起始行开始
- 如果有一个名为“<custom-ident>-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: <integer> && <custom-ident>?
- 之所以可以指定第n个行线，是因为网格会按数字顺序，自动生成行线的名称。分别正序和负的倒序两种命名: 1,2,3...n..或-n,...-3,-2,-1，所以此处的整数的取值，可以取正整数或者负整数，但不可以取0，因为没有名称为0的行线。
- 如果网格区域的名称是<custom-ident>，则只计算具有该名称的行。如果没有足够多的具有该名称的行存在，则假定所有隐式网格线都具有该名称，以便查找此位置。
- 设置起始行的行线: grid-row-start: 3; ⇔ 从第三行开始
- 设置指定区域的行线: grid-row-start: 2 c;
  - 此处指定了行的区域名称，c，但是并没有从c区域的第2行，即第3行开始，反而是从隐式行的第2行 (即第6行)开始，因为没有显式指定 c区域的行线名，所以不在搜索范围之内 ?
设置跨行的行数: grid-row-start: span && [ <integer> || <custom-ident> ]
- 如果省略整数<integer>，则默认为跨的行数为 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 数据类型
- <flex>数据类型
- 表示: 网格的可变长度:按比例划分空间
  - <flex> CSS 数据类型表示了网格（grid）容器中的 ❶ 一段可变长度。于 grid-template-columns、grid-template-rows及相关属性中使用。
- 可变长度= 数字+fr:
  - <flex>数据类型为一 <number>数字后加单位 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,<linenames>?<track-size><linenames>?)
<track-size> = <length> | %  | <flex> | 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; /*有效写法*/
}

合法值

/* 重复的轨道 <track-repeat> 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])

/* <auto-repeat> 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])

/* <fixed-repeat> 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( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | 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的值会被忽略，因为这个最大值是无效的。
- ② <flex>可变长度的数据类型不能作为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( [ <length> | <percentage> ] )
  - 等价于 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 <limit时:
      - 宽度达到 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接受长度值 <length>或百分比值<percentage> 作为参数。
  - 百分比值: 相对于给定轴中可用空间的百分比。
  - 在网格属性中，它相对于 ❶ 列轨道中的网格容器的内联大小和 ❷ 行轨道的网格容器的块大小。
    - 否则，它是相对于可用的内联大小或块大小的布局框取决于书写模式。
- ④ fit-content(limit)函数的可适用属性:
  - ❶ 设置显式行列轨道大小: grid-template-rows/ grid-template-columns。
  - ❷ 设置隐式行列轨道大小: grid-auto-rows/ grid-auto-columns。
  - ❸ 用于 repeat()函数中的第2个参数，作为轨道大小<track-size>。
  - ❹ 还可以用于布局盒大小(box size)的各类宽度，高度 属性。
  - 宽度，高度，最小宽度，最小高度，最大宽度和最大高度width, height, min-width, min-height, max-width , max-height，其中最大和最小尺寸指的是内容大小(content size)。

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

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

♣ 结束语和友情链接

参考文档
友情链接

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

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

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

在这里插入图片描述

Hey_Coder

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【CSS 网格布局 (Grid Layout )】

CSS 网格布局 Grid Layout

CSS 网格布局 Grid Layout

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

1.1 网格 相关术语

1.2 网格布局的 属性分类

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11.2 网格布局 相关 CSS 函数

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

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

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

♣ 结束语和友情链接

1.1 网格相关术语

1.2 网格布局的属性分类

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11.2 网格布局相关 CSS 函数

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

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

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