首先,你必须使用 display:grid 将容器元素定义为一个 grid(网格) 布局,使用 grid-template-colunms 和 grid-template-rows 设置 列 和 行 的尺寸大小,而后经过 grid-colunm 和 grid-row 将其子元素放入这个 grid(网格) 中。布局
grid-template-colunms:是设置整个网格的每列的宽度.rem
grid-template-rows:是设置整个网格的每行的高度.容器
frl至关与一个长度单位grid
1fr = (网格宽度 - 3rem - 网格宽度 * 25%) / 3;项目
repeat()能够建立重复的网格轨道。这个适用于建立相等尺寸的网格项目和多个网格项目。repeat()接受两个参数:第一个参数定义网格轨道应该重复的次数,第二个参数定义每一个轨道的尺寸。di
grid-colunm:x/y设置从哪列到哪列;co
grid-row:x/y设置从哪行到哪行;display
grid-area:若是指定四个值,第一个值对应grid-row-start,第二个值对应grid-column-start,第三个值对应grid-row-end,第四个值对应grid-column-end参数
grid-template-areastar