网格布局中 grid-template-columns / grid-template-rows 和 grid-template-areas 属性

grid-template-columns / grid-template-rows

使用空格分隔的值列表，用来定义网格的 列 和 行。
值表示 网格轨道(Grid Track) 大小，值之间的空格 表示网格线。

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

• 值： 可以是长度值，百分比，或者 等份网格容器中可用空间（使用 fr 单位）
• 空格： 任意名称

示例：当在网格轨道(Grid Track)值之间 留出空格 时，网格线 会自动分配正数和负数名称：

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

也可以明确指定 网格线(Grid Line)名称，例如 < line-name > 值。网格线名称用括号语法：

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

一条网格线(Grid Line)可以有多个名称。例如，这里的第二条 行网格线(row grid lines) 将有两个名字：row1-end 和 row2-start ：

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

可以用 repeat() 表示法 来定义包含多个重复值的网格线：

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

等价于：

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

如果多行共享相同的名称，则可以通过其网格线名称和计数来引用它们：

.item {
  grid-column-start: col-start 2;
}

可以用fr 单元 等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小 。例如，下面的代码会将每个网格项设置为网格容器宽度的三分之一：

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

剩余可用空间是除去所有非灵活网格项 之后 计算得到的。下面例子中，可用空间总量减去 50px 后再3等分 即 fr 单元的值 ：

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

综上举例：

html部分：

<div class="wrapper">
  <div class="box a">Adiv>
  <div class="box b">Bdiv>
  <div class="box c">Cdiv>
  <div class="box d">Ddiv>
div>

网格容器 css:

.wrapper {
		display: grid;
		grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px [col3-end];
		grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
  	    grid-gap: 10px;
		color: #fff;
	}

网格项 css:

.a {
		grid-column: col1-start / col3-start;
		grid-row: row1-start ;
    	background:orchid;
	}
	.b {
		grid-column: col3-start ;
		grid-row: row1-start / row2-end;
    	background:orange;
	}
	.c {
		grid-column: col1-start;
		grid-row: row2-start ;
   		background:blue;
	}
	.d {
		grid-column: col2-start ;
		grid-row: row2-start ;
   		background:lightcoral;
	}
	.box {
		border-radius: 5px;
		padding: 60px;
		font-size: 24px;
	}

布局效果：

grid-template-areas

通过引用 grid-area 属性 指定的 网格区域(Grid Area) 名称 来定义网格模板。
重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构。

值：

• ： 由网格项的 grid-area 指定的网格区域名称
• .（点号） ：代表一个空的网格单元
• none：不定义网格区域

.container {
  grid-template-areas: 
    " | . | none | ..."
    "...";
}

示例：

CSS 代码:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
 
.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

上面的代码将创建一个 4 列宽50px、 3 行高自动的网格。
整个第一行将由 header 区域组成。第二行将由两个 main 区域，一个空单元格，一个 sidebar 区域组成。最后一行全是 footer 区域组成。

注意：
声明中的每一行都需要有相同数量的单元格。
不能 用这个语法来命名 网格线，只是命名 网格区域。当使用这种语法时，区域两端的 网格线实际上会自动命名。比如网格区域的名字如果是 foo，该区域的 起始行网格线 和 起始列网格线 的名称将为 foo-start，而 最后一条行网格线 和 最后一条列网格线 的名称将为foo-end。这意味着某些网格线可能有多个名字，如上例中最左边的网格线，它将有三个名称：header-start，main-start 和 footer-start 。