grid layout

Posted 2021-01-08 likaibei

首先，你必须使用 display:grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-colunms 和  grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-colunm 和 grid-row 将其子元素放入这个 grid(网格) 中。

grid-template-colunms:是设置整个网格的每列的宽度.

grid-template-rows:是设置整个网格的每行的高度.

frl相当与一个长度单位

1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3;

repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。

 grid-colunm:x/y设置从哪列到哪列;

 grid-row:x/y设置从哪行到哪行;

grid-area:如果指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-end

 grid-template-areas