网站建设中的grid布局

grid布局也称作网格布局，用于将元素内部划分为行和列的一个个的单元格，当父元素设置display: grid;时，其子元素的float，display: inline-block，vertical-align等属性全部失效。通过相关属性控制内部的布局和内容大小，例如：

grid-template-columns： 定义每一列的列宽。

grid-template-rows：定义每一行的行高。

grid-template-areas：定义网格区域名称。

grid-column-gap：定义列与列之间的列间距。

grid-row-gap：定义行与行之间的行间距。

grid-gap：同时定义行与列之间的间距。

grid-auto-flow：定义排列顺序。

justify-items：定义中内容的水平位置。

align-items：定义内容的垂直位置。

place-items：同时定义内容的水平位置和垂直位置。

justify-content：定义整体内容的水平位置。

align-content：定义整体内容的垂直位置。

place-content：同时定义整体内容的水平位置和垂直位置。

grid布局的子元素属性有：

grid-column-start：定义子元素所对齐的垂直网格线。

grid-column-end：定义子元素所对齐的垂直网格线。

grid-column：同时定义子元素左边框和右边框所对齐的网格线。

grid-row-start：定义项目上边框所对齐的水平网格线。

grid-row-end：定义项目下边框所对齐的水平网格线。

grid-row：同时定义项目上边框和下边框所对齐的网格线。

grid-area：定义项目位于哪个区域，区域由grid-template-areas定义。

justify-self：定义项目在单元格区域内的水平位置。

align-self：定义项目在单元格区域内的垂直位置。

place-self：同时定义项目在单元格区域内的水平和垂直位置。

一般来说grid布局网格的话除了兼容性问题之外都比flex布局好用一些，在项目中还是要看自己对那个布局更加熟练。