比Flex更强大的Grid网格布局

什么是 Grid 布局

相信写过前端对齐布局的前端都知道 Flex 布局，它是一种轴线布局，指定“项目”针对轴线的位置，针对行对齐、列对齐（居中对齐、两端对齐）这些布局场景使用 Flex 布局是一种非常常见且高效的方法。Grid 布局则是将容器分成“行”和“列”，产生单元格，然后指定“项目”所占的单元格，远比 Flex 布局更强大。

浏览器兼容性

Flex 兼容性更好

Grid 看需求选择

基本概念

跟 Flex 布局类似，Grid 也有两种属性：容器属性和项目属性。

<div class="wrap">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
  <div class="box box11">11</div>
  <div class="box box12">12</div>
  <div class="box box13">13</div>
  <div class="box box14">14</div>
  <div class="box box15">15</div>
</div>

:root{
  --wrapSize: 400px;
}
.wrap {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  margin: 30px auto;
  width: var(--wrapSize);
  height: var(--wrapSize);
  border: 1px solid green;
}
.box{
  text-align: center;
  font-weight: bold;
}

容器属性

grid-template-columns 划分列

1. 固定列 100px，“项目”会自动撑满容器高度
   

2. 当容器宽度未知时，repeat(xx, 100px) 第一个参数将无法得知，可以使用 repeat(auto-fill, 100px) 它会自动以一列 100px 宽度显示，若容器宽度400就展示4列，若容器宽度500就展示5个，无需手动计算设置。
   

3. 设置不同列为不同宽度

四列宽度分别为 100px 150px 50px 100px

grid-template-columns: 100px 150px 50px 100px;

4. 比例片段 fr(fraction)

列宽分成7份，各列占比为 1:3:2:1

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

5. 长度范围 minmax()

 grid-template-columns: 3fr minmax(150px, 1fr);

6. 浏览器自动分配 auto

grid-template-columns: 100px auto 100px;

grid-gap / grid-column-gap 间距

grid-row-gap: 10px;
grid-column-gap: 10px;

简写方式：

grid-gap: 10px;

justify-items(水平方向) / align-items(垂直方向) 单元格内容的对齐方式

简写方式：

place-items: stretch stretch;

justify-content(水平方向) / align-content(垂直方向) 整个内容区域的对齐方式

项目属性

占单元格从 grid-column-start / grid-row-start 到 grid-column-end / grid-row-end

1. 合并单元格行或列

.box1{
  grid-column-start: 1;
  grid-column-end: 3;
}

简写方式：

grid-column: 1/3;

2. 合并单元格区域

.box1{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

简写方式：

grid-area: 1/1/3/3;

justify-self(水平方向) / align-self(垂直方向) 项目对齐方式

简写方式：

place-self: stretch;