CSS Grid Layout是CSS为布局新增的一个网格布局的模块，网格布局主要针对Web应用程序开发。
- Flex布局：基于轴线的一维布局
- Grid布局：基于网格的二维布局
Flex弹性布局是轴线布局，需指定项目所针对轴线的位置，因此可看作是一维布局。Grid网格布局则是将容器划分为行和列以产生单元格，然后指定项目所在单元格，因此可以看作是二维布局。
Grid网格布局的核心理念与Flexbox弹性盒子类似，都是基于容器Container和容器中的项目Item。CSS网格（Grid）布局与弹性（Flexbox）一维布局不同之处在于，Grid是一个二维布局系统，它可以同时处理行和列。通过将CSS规则应用于父元素（Container，网格容器）和子元素（Items，网格项）可轻松使用网格布局。
CSS网格布局的目标是完全改变基于网格的用户界面的布局方式，之前使用表格（Table）、浮动（Float）、定位（Position）、内嵌块（Inline-Block）的布局方式本质上都只是Hacks，他们会遗落很多重要的设置，比如垂直居中。网格布局创建的结构与使用古老的Table表格标签类似，只是Grid布局是在CSS中实现而非HTML中实现。同时可使用媒体查询根据不同上下文重新定义布局。对于响应式设计从此不再担心因为HTML结构而影响布局。Grid布局可让现有布局脱离文档流的限制，也就是说，HTML结构无需根据设计稿从上往下布置，可以自由地更改页面元素的位置。
虽然Flexbox弹性盒子的出现改善了布局方式，但它的目标是为了解决简单的一维布局，对于复杂的二维布局Grid网格布局则是专门为解决此类问题而创建的CSS模块。实际上Flexbox弹性盒子和Grid网格布局是可以协同工作完美配合的。
例如：使用Grid网格布局定位页面内容，对齐标头组件，并将页面变为响应式。
- 定位页面内容
使用Grid的网格模板区域grid-template-areas，定义四个网格区域分别为header、main、sidebar、footer
- 将页面变为响应式
使用媒体查询重新排列网格区域
@media (max-width:600px){
.container{grid-template-areas:"header" "main" "sidebar" "footer"; grid-template-columns:1fr;}
}
- 对齐标头组件
在header中为了拆分导航和按钮，需在header中为标头定义display:grid属性，并设置一个2列的网格，同时定义在对应的边界上。
header{display:grid; grid-template-columns:1fr 1fr;}
header nav{justify-self:start;}
header button{justify-self:end;}
完整代码
grid
CSS Grid Layout
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
*{margin:0; padding:0; box-sizing:border-box;}
body{text-decoration:none; color:inherit;}
a{text-decoration:none; color:inherit;}
/*layout*/
.container{
max-width:900px; margin:0 auto; padding:0 60px; background-color:#fafafa;
display:grid; grid-template-areas:"header header" "main sidebar" "footer footer"; grid-template-columns:3fr 1fr; grid-gap:60px;
}
/*header*/
header{
grid-area:header; padding:20px 0; color:#ef5350;
display:grid; grid-template-columns:1fr 1fr;
}
header nav{justify-self:start;}
header button{justify-self:end;}
.nav-item{display:inline-block; margin-right:15px;}
.btn{border:none; background-color:#ef5350; color:#fff; padding:8px 25px; cursor:pointer; text-transform:uppercase;}
/*main*/
.main{grid-area:main;}
.main .title{font-size:32px; margin-bottom:55px;}
.main .content{margin-bottom:50px;}
.main img{width:100%;}
/*sidebar*/
.sidebar{grid-area:sidebar; padding:20px; border:1px solid #a2a2a2;}
/*footer*/
footer{grid-area:footer; padding:20px 0; color:#ef5350; text-align:center;}
footer div{padding:10px; color:#777; font-size:12px;}
/*media*/
@media (max-width: 600px){
.container{grid-template-areas:"header" "main" "sidebar" "footer"; grid-template-columns:1fr;}
}
网格结构
使用Grid布局，首先需要使用display:grid将父元素定义为一个网格容器，然后使用grid-template-rows和grid-template-column设置行和列的尺寸。接着通过grid-row和grid-column将容器子元素放入其中。
Grid布局与Flexbox相似之处在于，网格项（Grid Item）的HTML源码结构的顺序是不重要的，CSS可以以任何顺序放置它们，这使得媒体查询（Media Queries）重新排列网格变得容易。可以通过定义整个页面的布局，然后重新排列布局以使用不同的屏幕宽度。
- 网格容器（Grid Container）
网格布局的节点区域，即应用display:grid的元素，是网格项（Grid Item）的直接父级。
网格项（Grid Item）
网格项是网格容器的直属下级元素，网格容器内部不采用网格定位的子元素，只能是顶级元素。网格线（Grid Line）
网格线是构成网格系统的分界线或分割线，用来分隔容器的线，可分为水平网格线（row grid lines）和垂直网格线(column grid lines)，用于将网格切分为行和列并定位网格项。
- 网格轨道（Grid Track）
网格轨道是指两条相邻网格线之间的空间，可见其想象成是网格的行或列。
- 网格单元格（Grid Cell）
两个相邻行列网格线之间的交叉空间，行和列交叉形成单元格。单元格是网格系统中的一个单元。
- 网格区域（Grid Area）
网格区域是由任意数量的网格单元格组成的空间区域
- 行：水平分割线分割成行，n行需要n+1条水平分割线。
- 列：垂直分割线将容器分隔成列，n列需n+1条垂直分割线。
网格项和单元格之间的区别
例如：使用Grid网格布局实现圣杯布局
grid
header
main
*{margin:0; padding:0; box-sizing:border-box;}
body{text-decoration:none; color:inherit;}
a{text-decoration:none; color:inherit;}
/*layout*/
.container{
max-width:56em; margin:0 auto; padding:1em; background-color:#fafafa;
display:grid; grid-template-areas:"header header header" "navbar main sidebar" "footer footer footer"; grid-template-columns:1fr 3fr 1fr; grid-template-rows:1fr 3fr 1fr; grid-gap:1em;
}
.header .footer{grid-column:1 / 4;}
.container > *{display:flex; justify-content:center; align-items:center; border:1px solid #eee; padding:1em;}
/*header*/
.header{grid-area:header;}
/*navebar*/
.navebar{grid-area:navebar;}
/*main*/
.main{grid-area:main;}
/*sidebar*/
.sidebar{grid-area:sidebar;}
/*footer*/
.footer{grid-area:footer;}
/*media*/
@media all and (max-width: 700px){
aside, main{grid-column:1 / 4;}
}
网格容器
默认情况下，网格容器中的元素都是块级元素，但也可设置为行内元素。
设置网格容器
-
display:grid
使用display:grid指定节点后便可以使用网格布局来构建行和列，用于生成一个块级网格。
-
display:inline-block用于生成一个内联网格
当设置网格布局后，网格容器内的网格项的float、display:inline-block、display:table-cell、display:vertical-align和column-*等设置都将会失效。
-
float和clear使用在网格项中会失效 - 多列布局模块中的
column-*属性运用在网格容器上会失效 -
vertical-align使用在网格单元格上会失效 -
:first-line和:first-letter等为元素不能应用在网格容器上
| 容器属性 | 描述 |
|---|---|
| display | 将元素定义为网格，并为其内容建立网格格式的上下文。 |
| grid-template-columns | 设置列内容的属性 |
| grid-template-rows | 设置行内容的属性 |
| grid-gap | 设置行或列的间距 |
| grid-template-areas | 设置单元格区域 |
| grid-auto-flow | 设置单元格方向 |
| grid-auto-columns | 设置超出网格的单元格属性 |
| grid-auto-rows | 设置超出网格的单元格属性 |
| place-items | 设置单元格中内容排列位置 |
| place-content | 设置内容区域在容器中的位置 |
网格项目
网格项目通过引用特定网格线（grid lines）来确定网格项（grid item）在网格内的位置
.grid-item{
grid-column-start: | | span | span | auto;
grid-column-end: | | span | span | auto;
grid-row-start: | | span | span | auto;
grid-row-end: | | span | span | auto;
}
| 网格项属性 | 描述 |
|---|---|
| grid-row-start | 网格项行开始网格线 |
| grid-row-end | 网格项行结束网格线 |
| grid-column-start | 网格项列开始网格线 |
| grid-column-end | 网格项列结束网格线 |
| grid-row | grid-row-start和grid-row-end的合并简化形式 |
| grid-column | grid-column-start和grid-column-end的合并简化形式 |
网格线取值类型
| 取值类型 | 描述 |
|---|---|
| line | 一个数字引用一个编号的网格线，或使用一个名字来引用一个命名的网格线。 |
| span |
网格项跨越所提供的网格轨道的数量 |
| span |
网格项跨域到与之提供的名称位置 |
| auto | 自动放置自动跨越，默认会扩展一个网格轨道的宽度或高度。 |
当元素设置网格项属性后，以下CSS属性将对网格项失效。
floatdisplay:inline-blockdisplay:table-cellvertical-aligncolumn-*
例如：网格项定位
- 列：从第2条列线开始到名为
five的列线结束 - 行：从名为
row1-start行线开始到第3条行线结束
.grid-container{
display:grid;
}
.item-a{
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end:3;
}
例如：网格线跨度
- 列：从第1条列线开始跨越到名为col4-start的列线结束
- 行：从第2条行线开始跨越2条行线后结束
.item-b{
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}
若没有声明指定grid-column-end或grid-row-end属性，默认情况下网格项将占据1个轨道。网格项是可以相互重叠的，可设置z-index属性来控制层叠的上下顺序。
简化形式
grid-column和grid-row属性是grid-column-start+grid-column-end和grid-row-start+grid-row-end属性的简写形式。
.grid-item{
grid-column: / | / span ;
grid-row: / | / span ;
}
grid-column和grid-row的取值是
例如：网格项定位简写
- 列：从第3条列线开始跨越2个网格后结束
- 行：从名为
third-line的行线开始到第4个行线结束
.item-c{
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
若没有声明分割线结束位置，则网格项默认占据1个网格轨道。
行高列宽
使用grid-template-rows设置行高，使用grid-template-columns设置列宽。grid-template-rows和grid-template-columns使用空格分隔的值列表，用来定义网格的行和列。这些值表示网格轨道（Grid Track）的大小，他们之间的空格则表示分割线。
| 取值 | 描述 |
|---|---|
| track-size | 可以是长度值、百分比、等分块fr |
| line-name | 名称 |
.grid-container{
display:grid;
grid-template-rows:... | ...;
grid-template-columns:... | ...;
}
需要注意的是，当在网格轨道值之间保留空格时网格线会自动分配正数和负数的名称，也可明确指定网格线名称。
.grid-container{
display:grid;
grid-template-rows: 25% 100px auto;
grid-template-columns: 40px 50px auto 50px 40px;
}
.grid-container{
display:grid;
grid-template-rows:[row1-first] 25% [row1-end] 100px [third-line] auto [last-line];
grid-template-columns:[first] 40px [line2] 50px [line3] auto [col-start] 50px [five] 40px [end];
}
当指定网格线名称是需使用[]中括号将名称包裹
一条网格线可以包含多个名称，网格线名称
.grid-container{
display:grid;
grid-template-rows:[row1-start] 25% [row2-start row1-end] 25% [row2-end];
}
如果需要定义包含多个重复的值，可使用repeat()表示法来简化定义。
.grid-container{
display:grid;
grid-template-columns: repeat(2, 20px [col]);
}
/*等价写法*/
.grid-container{
display:grid;
grid-template-columns: 20px [col] 20px [col];
}
例如：设置3行4列的网格，每个单元格空间都是100px，即每个单元格的行高为100px，列宽为100px。
.grid{
display:grid;
grid-template-rows:100px 100px 100px;
grid-template-columns:100px 100px 100px 100px;
}
行高和列表的设置方式
| 设置方式 | 描述 |
|---|---|
| 绝对单位 | grid-template-rows: 100px 100px 100px; |
使用百分比% |
grid-template-columns: 25% 25% 25% 25%; |
使用repeat()方法 |
grid-template-columns: repeat(4, 25%); |
使用fr关键字 |
grid-template-columns: 50px 3fr 1fr 2fr; |
使用minmax()方法 |
grid-template-columns:150px 1fr 1fr minmax(50px, 150px); |
使用auto关键字 |
grid-template-columns:100px auto 130px 100px; |
| 使用网格线的名称 | grid-template-columns: [c1] 100px [c2] 100px [c1] 100px [c3] auto [c4]; |
repeat
使用repeat()方法
repeat(times, value)
| 参数 | 描述 |
|---|---|
| times | 重复次数 |
| value | 重复的值 |
当单元格很多且重复时可使用repeat方法，repeat方法可接受两个参数，第一个时重复的次数，第二个时所需重复的值。repeat方法除了使用重复值，还可以使用重复模式。
grid-template-rows: repeat(3 , 33%);
grid-template-columns: repeat(4, 25%);
重复模式
grid-template-columns: repeat(2, 100px 100px);
例如：使用Grid布局实现3x3的九宫格布局
1
2
3
4
5
6
7
8
9
使用auto-fill让容器自动判断是否填充，当单元格大小固定时但网格容器大小不确定时，若希望每一行或每一列可以容纳尽可能多的单元格时可采用auto-fill关键字来自动填充。
grid-template-columns: repeat(auto-fill, 100px 20px 80px);
fr
使用fr关键字
fr（fraction，片段）单元允许使用等分网格容器剩余可用空间来设置网格轨道的大小。
例如：将每个网格项设置为网格空间宽度的1/3
.grid-container{
display:grid;
grid-template-rows: 1fr 1fr 1fr;
}
剩余可用空间是除开所有非灵活网格项之后计算得到的，若两列段都分别为1fr和2fr则表示后者为前者2倍，可结合px使用，可对剩余空间按fr分配。
例如：可用空间总量减去50px后的剩余可用空间，使用fr按等分比例分配。
grid-template-columns: 50px 3fr 1fr 2fr;
网格区域
可设置网格容器的grid-template-areas属性来指定网格区域名称，用以定义网格模板。在通过设置网格项的grid-area属性来定义网格区域。
.grid-container{
grid-template-areas:
" | . | name | ..."
"...";
}
例如：定义3行4列网格，第1行由4个header区域组成，第2行由2个main区域和1个空单元格和1个sidebar区域组成，第3行由4个footer区域组成。
.grid-container{
display:grid;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
.item-header{
grid-area:header;
}
.item-main{
grid-area:main;
}
.item-sidebar{
grid-area:sidebar;
}
.item-footer{
grid-area:footer;
}
- 使用一个点号
.表示一个空单元格，这种语法本身可视为网格的可视化结构。 - 可以使用任意数量相邻的点
.来声明单个空单元格，只要点之间没有空隙隔开就代表一个单独的单元格。 - 声明中每一行都需要具有相同数量的单元格
- 重复的网格区域名称将会导致内容跨域单元格
网格模板
网格模板grid-template用于定义grid-template-rows、grid-template-columns、grid-template-area三个的简写属性。
.grid-container{
grid-template: none | / ;
}
-
grid-template:none表示将三个属性值设置为初始值 -
/ grid-template-rows和grid-template-columns设置为特定的值，同时设置grid-template-area为none。
.grid-container{
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
.grid-container{
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-areas:"header header header" "footer footer footer";
}
网格间隙
通过设置网格容器的grid-row-gap和grid-column-gap属性来指定网格线的大小，可想象成行列之间的间距的宽度，即行间距和列间距。
.grid-container{
grid-row-gap: ;
grid-column-gap: ;
}
/*简写*/
.grid-container{
grid-gap: ;
}
-
grid-gap是grid-row-gap和grid-column-gap的简写形式 - 若
grid-row-gap没有定义则自动设置为grid-column-gap的长度
例如：设置九宫格布局
.grid-container{
display:grid;
grid-template-rows: 100px auto 100px;
grid-template-columns: 100px auto 100px;
grid-row-gap:15px;
grid-column-gap: 10px;
}
例如：九宫格间隙简写
.grid-container{
display:grid;
grid-template-rows: 100px auto 100px;
grid-template-columns: 100px auto 100px;
grid-gap:15px 10px;
}
网格项对齐方式
网格容器内的网格项的对齐方式可分为2种
- 水平对齐
justify-items - 垂直对齐
align-items
通过设置网格容器的place-items属性，用于配置容器项的水平对齐方式justify-items和垂直对齐方式align-items。简单来说，place-items实际上是justify-items和align-items的简写形式。
.grid-container{
display:grid;
place-items: ;
}
place-items的第1个值用来设置align-items垂直对齐属性，第2个值用来设置justify-items水平对齐属性。若省略第2个值则第1个值将自动分配给这两个属性。
水平对齐
通过设置网格容器的justify-items属性，即沿着inline行轴线对齐网格项，justify-items属性的取值即网格项的对齐方式，其值适用于网格容器内的所有网格项。
.grid-container{
display:grid;
justify-items: start | end | center |stretch;
}
| 水平对齐 | 描述 |
|---|---|
| start | 左对齐，将网格项沿单元格左侧起始边缘对齐。 |
| end | 右对齐，将网格项沿单元格右侧结束边缘对齐。 |
| center | 居中对齐，将网格项沿单元格的水平中间位置对齐。 |
| stretch | 默认，水平拉伸填满单元格水平宽度。 |
四种内容对齐方式也可应用于网格项中的justify-self属性中。
.grid-item{
justify-item: start | end | center | stretch;
}
垂直对齐
通过设置网格容器的align-items属性可沿block列轴线对齐网格项，与之反向的属性是justify-items，justify-items沿inline行轴线对齐。align-item适用于网格容器内所有的网格项。
align-items的取值包括4种
| 垂直对齐 | 描述 |
|---|---|
| start | 顶对齐，将网格项对齐到单元格顶部起始边缘位置。 |
| end | 底对齐，将网格项对齐到单元格底部结束边缘位置。 |
| center | 垂直居中对齐，将网格项对齐到单元格垂直中间位置。 |
| stretch | 默认值，垂直拉伸填满单元格垂直高度。 |
align-items的4种对齐方式同样适用于网格项的align-self属性。
网格内容对齐方式
当网格容器大于网格项总计大小时，若网格项均采用非灵活性的单位设置时，比如px像素。此时可以设置网格容器内网格内容的对齐方式。网格内容的对齐方式也分为2种，分别是
- 网格内容水平对齐
justify-content - 网格内容垂直对齐
align-content
水平对齐
justify-content属性会沿着inline行轴线方向对其网格，与之相反相反的属性为align-content，align-content将沿着block列轴线方向对齐网格。
| 水平对齐 | 描述 |
|---|---|
| start | 左对齐，将网格对齐到网格容器的左侧起始边缘。 |
| end | 右对齐，将网格对齐到网格容器的右侧结束边缘。 |
| center | 水平居中，将网格对齐到网格容器的水平中间位置。 |
| stretch | 水平拉伸，调整网格项宽度，允许网格填充整个网格容器的宽度。 |
| space-between | 两端对齐，每个网格项之间放置均匀空间，左右两端0空间。 |
| space-around | 每个网格项之间放置均匀空间，左右两端放置一半空间。 |
| space-evenly | 每个网格项之间放置均匀空间，左右两端放置一个均匀空间。 |
.grid-container{
display:grid;
justify-content: start | end | center | stretch | space-between | space-around | space-evenly;
}
垂直对齐
当网格总计尺寸小于网格容器时，此时若使用非灵活性的尺寸单位尺寸（比如：px像素）来设置大小，就可能出现网格内元素的排列问题。在这种情况下，可以通过设置网格容器中内容的对齐方式来实现内容的布局。align-content属性可沿列轴线block对齐网格。
| 垂直对齐 | 描述 |
|---|---|
| start | 顶对齐，将网格对齐到网格容器的顶部起始边缘。 |
| end | 底对齐，将网格对齐到网格容器底部结束边缘。 |
| center | 垂直居中，将网格对齐到网格容器垂直中间位置。 |
| stretch | 垂直拉伸，调整网格项的高度，允许网格垂直拉伸后填满整个网格容器的高度。 |
| space-between | 垂直两端对齐，在每个网格项之间放置一个均匀的空间，上下两端0空间。 |
| space-around | 垂直两端减半对齐，在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间。 |
| space-evenly | 垂直两端均匀对齐，在每个网格项之间放置一个均匀空间，上下两端放置一个均匀空间。 |
.grid-container{
display:grid;
align-content: start | end | center | stretch | space-between | space-around | space-evenly;
}
简写形式
place-content是justify-content和align-content的简写形式
.grid-container{
display:grid;
place-content: ;
}
place-content的第一个参数是align-content，第二个参数是justify-content。若place-content仅设置一个参数则自动将值分配给这两个属性。
网格轨道（Grid Tracks）
Grid网格布局使我们在CSS中定义网格，并将网格项放置到网格单元格中。事实上无需指定每个网格轨道，也无需手动放置每个网格项，因为网格布局足够灵活可自适应网格项。这些都是由显式和隐式网格来处理。
显式网格
使用grid-template-rows、grid-template-columns、grid-template-areas属性定义形成固定数量网格线和网格轨道的方式成为显式网格。
例如：定义2x4即2个水平轨道和4个垂直轨道的显式网格
.grid-container{
display:grid;
grid-template-rows:100px 100px;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-gap:10px;
}
对于重复轨道，可使用repeat()表示法来自动化实现，repeat()表示法的第一个参数是重复的次数，第二个参数用来指定轨道列表。
grid-template-columns:1fr 1fr 1fr 1fr;
grid-template-columns:repeat(4, 1fr);
grid-template-columns:repeat(2, 1fr 1fr);
repeat()函数可以再进一步自动化，即是用auto-fill和auto-fit关键字替代设置固定数量的重复，以实现自动重复轨道。
-
auto-fill自动填充轨道
auto-fill关键字创建适合网格容器的轨道数量，而不会导致网格溢出。
例如：重复放入宽度为100px的垂直轨道以自适应网格容器
.grid-container{
display:grid;
grid-template-columns: repeat(auto-fill, 100px);
}
注意：如果使用repeat(auto-fill, 1fr)则只会创建一个轨道，因为宽度1fr的单个轨道已经填满整个网格容器。
-
auto-fit自动调整轨道
auto-fit关键字的行为和auto-fill相同，auto-fit在网格项目放置后，只会根据需要创建任意数量的轨道，而且任何空的重复轨道都会折叠在一起合并起来。
在repeat()函数中使用auto-fit会根据需要出尽可能多的轨道，而且轨道尽会可能多地放入网格容器中。
例如：
.grid-container{
display:grid;
grid-template-columns:repeat(auto-fit, 100px);
grid-gap:10px;
}
repeat()函数中使用固定数量的垂直轨道，当网格项超过固定数量时会自动添加更多的行。
例如：
html, body{
height:100%;
}
.grid-container{
display:grid;
height:100%;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);
grid-gap:10px;
}
隐式网格
当网格项的数量多于网格单元格时，或者网格项位于显式网格外部时，网格容器会通过网格添加网格线自动生成网格轨道。显式网格与额外的隐式网格轨道和网格线形成了所谓的隐式网格。
例如：当2个网格放置在显式网格之外时会导致创建隐式网格线和轨道
.grid-container{
display:grid;
}
.grid-item:first-child{
grid-column-start:-1;
}
.grid-item:nth-child(4){
grid-row-start:4;
}
隐式轨道的宽度和高度是自动设置，其大小足以适应放置的网格项，可更改其默认行为。
调整隐式轨道
Grid网格布局中可使用grid-auto-rows和grid-auto-columns属性指定自动生成的网格轨道的大小，即隐式网格轨道。当网格容器中的网格项多于单元格时或网格项位于显式网格之外时，会自动创建隐式网格轨道。
grid-auto-rows: ...;
grid-auto-columns: ...;
track-size可以是长度值、百分比、等分网格容器中可用空间的分数即fr。
通过使用grid-auto-rows和grid-auto-columns属性可以控制隐式网格轨道的大小。
例如：生成2x2的网格，单元格宽高为60x90。
.grid-container{
display:grid;
grid-template-rows:90px 90px;
grid-template-columns: 60px 60px;
}
使用grid-column和grid-row定位网格项
.item-a{
grid-column:1 / 2;
grid-row:2 / 3;
}
.item-b{
grid-column: 5 / 6;
grid-row: 2 / 3;
}
-
item-a从第1条列线到第2条列线结束即第1列，从第2条行线开始到第3条行线结束即第2行，中间交叉的位置即[2, 1]第2行第1列。 -
item-b从第5列线开始到第6列线结束，从第2行线开始到第3行线结束。但从未定义第5列线、第6列线，引用的网格线不存在，此时会自动创建宽度为0的隐式网格轨道以填补空缺，此时可使用grid-auto-rows和grid-auto-columns指定隐式轨道的大小。
.grid-container{
display:grid;
grid-auto-columns:60px;
}
例如：固定宽度和高度的隐式轨道
.grid-container{
display:grid;
grid-template-rows:100px 100px;
grid-template-columns:repeat(4, 1fr);
grid-gap:10px;
grid-auto-rows:60px;
grid-auto-columns:200px;
}
通过minmax()函数来指定范围，可使隐式轨道更为灵活。
例如：设置隐式轨道至少有200px的宽度和60px的高度，若内容需要将自动扩展。
.grid-container{
grid-auto-rows:minmax(60px, auto);
grid-auto-columns:minmax(200px, auto);
}
学习资料
https://www.html.cn/archives/8510
https://www.html.cn/archives/10327
https://zhuanlan.zhihu.com/p/40148221