grid-template-rows: 50px 100px
属性 grid-template-rows 用于定义行的尺寸, 即轨道尺寸. 轨道尺寸可以是任何非负的长度值 (px,%,em, 等)
网格项目 1 的行高是 50px, 网格项目 2 的行高是 100px.
因为只定义了两个行高, 网格项目 3 和 4 的行高取决于其本身的高度.
- 1 2 3 4
- grid-template-columns: 90px 50px 120px
类似于行的定义, 属性
grid-template-columns
用于定义列的尺寸.
因为定义中只有三列, 所以项目 4,5,6 排在新的一行; 并因为它们位于第 1,2,3 列的轨道上, 所以其宽度等于定义中第 1,2,3 列轨道的宽度.
网格项目的第 1 列, 第 2 列, 第 3 列的宽度分别是 90px, 50px 和 120px .
- 1 2 3 4 5 6
- grid-template-columns: 1fr 1fr 2fr
单位 fr 用于表示轨道尺寸配额, 表示按配额比例分配可用空间.
本例中, 项目 1 占 1/4 宽度, 项目 2 占 1/4 宽度, 项目 3 占 1/2 宽度.
- 1 2 3
- grid-template-columns: 3rem 25% 1fr 2fr
单位 fr 和其它长度单位混合使用时, fr 的计算基于其它单位分配后的剩余空间.
本例中,
- 1fr = (容器宽度 - 3rem - 容器宽度的 25%) / 3
- 1 2 3 4
来源: https://juejin.im/entry/5ae27b3a518825670e5cc7ae