Grid网格布局

概述

网格布局是最强大的CSS布局方案，主要用于页面的整体布局。可以将一个网页分成一个个网格，作出任意的组合。

容器：采用网格布局的区域，就是容器。

项目：容器内的子元素，就是项目。

容器属性

• display: grid指定一个容器采用网格布局。

• grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

• rid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

• grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式

• grid-template-areas属性用于定义区域。

• grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

• justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。

• place-items属性是align-items属性和justify-items属性的合并简写形式。

• justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

• place-content属性是align-content属性和justify-content属性的合并简写形式。

• grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

• grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

• grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

项目属性

• grid-column-start属性：左边框所在的垂直网格线， grid-column-end属性：右边框所在的垂直网格线
• grid-row-start属性：上边框所在的水平网格线， grid-row-end属性：下边框所在的水平网格线
• grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和 - grid-row-end的合并简写形式。
• grid-area属性指定项目放在哪一个区域。
• justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
• align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
• place-self属性是align-self属性和justify-self属性的合并简写形式。