网格布局 grid

分布

grid-template-columns 列分布

grid-template-rows 行分布

minmax() 最小，最大值

repeact() 重复写值

间距

gap (行间距，列间距) 组合

row-gap 行间距

columns 列间距

对齐

justify-items & align-items & place-items

网格中的单元格内元素位置

place-items （justify-items，align-items）组合

justify-items 水平位置

align-items 垂直位置

       参数：start 起始位置        end 结束位置        ccenter 居中        stretch 拉伸

 

justify-content & align-content & place-content

        place-content: (justify-content align-content)

        justify-content: 水平位置

        align-content: 垂直位置

参数：start: 初始排列        end:末尾排列        center:居中排列

                space-between:行与列四周容器边框对齐，与容器边框紧贴，不留间距

                space-around:行与列向四周容器边框对齐，四周留有间距

                space-evenly:行和列，都均匀排列，每个元素之间，包括与容器边框的间距，都相等

                stretch:项目大小没有指定时，拉伸占据整个网格容器

   

    控制网格的排列顺序

                grid-auto-flow        参数 row        column        row dense        column dense

项目属性

        项目排列的顺序

                order

        修改元素占几分

        grid-area

                    grid-area: row-start/ column-start / row-end / column-end

        grid-column-start

        grid-column-end

        grid-row-start

        grid-row-end

        更改单元格位置

                grid-column grid-row
         

        设置单元格内项目位置

                place-self (justify-self,align-self)

                justify-self 水平

                align-self 垂直

                参数 start 起始位置        end 结束位置        ccenter 居中        stretch 拉