网格布局 Grid

网格布局
网格布局的API

grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。

Grid 布局远比 Flex 布局强大。弹性布局（flex）和 网格布局（grid）的区别：

• Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
• Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

一、基本概念

采用网格布局的区域，称为"容器"。容器内部采用网格定位的子元素，称为"项目"。项目只能是容器的顶层子元素，不包含项目的子元素。

以下面代码为例：ul 是容器，li 作为 ul 的子元素是项目。p 元素是项目的子元素而不是项目。

<ul>
  <li>1</li>
  <li>2</li>
  <li><p>3</p></li>
</ul>

二、设置 Grid 布局

首先要选定网格盒子。任何一个容器都可以指定为 Grid 布局：

div {
   
  display: grid;
}

行内元素也可以使用 Grid 布局：

div {
   
  display: inline-grid;
}

设为 Grid 布局以后，容器子元素（项目）的 “float、display: inline-block、display: table-cell、vertical-align 和 column-*” 等设置都将失效。

三、父元素设置的属性

以下 6 个属性设置在容器上：

• grid-template-columns：定义每一列的列宽
• grid-template-rows：定义每一行的行高
• grid-row-gap：设置行与行的间隔（行间距）
• grid-column-gap：设置列与列的间隔（列间距）
• grid-gap：是 grid-column-gap 和 grid-row-gap 的合并简写形式
• grid-template-areas：用于定义区域
• grid-auto-flow：设置子元素的排列顺序
• 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 这 3 个属性的合并简写形式（为了易于读写不建议使用此合并属性）
• grid：是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 这 6 个属性的合并简写形式（为了易于读写不建议使用此合并属性）

四、自身设置的属性

• grid-column-start：左边框所在的垂直网格线
• grid-column-end：右边框所在的垂直网格线
• grid-column：是 grid-column-start 和 grid-column-end 的合并简写形式
• grid-row-start：上边框所在的水平网格线
• grid-row-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 的合并简写形式

【参考文档】：
CSS Grid 网格布局教程
网格布局