grid 栅格化布局

Grid布局是CSS中一种强大的二维布局系统，可以同时处理行和列的布局。grid 初始化元素为栅格化

将一个HTML元素转换为网格的容器，只需要对其设置display: grid即可。display: grid告诉咱们，能够运用CSS Grid的相关特点了。

<dl class="container">

  <dd class="item1">item1dd>

  <dd class="item2">item2dd>

  <dd class="item3">item3dd>

  <dd class="item4">item4dd>

  <dd class="item5">item5dd>

  <dd class="item6">item6dd>

dl>

.container{

  display: grid;

}

常用的特点：

grid-template-columns：100px 100px 100px 竖向摆放，其特点值为竖向摆放的长度 此刻有三行

grid-template-rows：100px 100px 横向摆放，其特点值为横向摆放的长度 此刻有两列

grid-tamplate: 100px 100px 100px / 100px 100px 上面两个特点的简写 用/分隔开来

grid-gap:10px 10px 5px 5px； 上右下左的距离

align-self:穿插轴上的对齐方法（子代设置特点）

justify-self:主轴上的对齐方法（子代设置特点）

对齐方法常用特点值

flex-start 从开始的当地水平/笔直对齐 ，默许是左

flex-end 从结束的当地水平/笔直对齐 ，默许是右

center 居中

space-between 水平/笔直方向首尾紧贴父元素，中心空隙等分

space-around 水平/笔直方向的子元素之间的左右/上下距离相等，相邻元素之间的距离为两倍距离

justify-items

咱们想对一切子元素内容进行水平方向的摆放，那么需要在设定的容器中运用justify-items特点，而不是一个个子元素进行设置justify-self特点。justify-items特点值同justify-self。

.container{

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-template-rows: 1fr 1fr 1fr;

  grid-gap: 10px;

  justify-items: center;

}

仿制代码

align-items

同理的，咱们想对一切子元素内容进行笔直方向的摆放，那么需要在设定的容器中运用align-items特点，而不是一个个子元素进行设置align-self特点。align-items特点值同align-self。它的学习曲线相对平缓，但功能非常强大！