Skip to main content

grid布局

网格容器​

  • display: iniline-grid
  • display: grid

显式网格​

  • grid-template-columns 用来定义容器中列的宽度
  • grid-template-rows 用来定义容器中行的高度
.container {
  width: 300px;
  height: 300px;
  background-color: pink;
  
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  
  > div:nth-child(odd) {
    background: skyblue;
  }
  
  > div:nth-child(even) {
    background: orange;
  } 
}

这样网格容器中前三列的宽度为 100px，前三行的高度为 100px。

pic.sm

另外，这两个属性的取值可以是 <length>、fr单位 和 auto。

如果某一列或者行的宽度为 auto，那么它会占用容器剩余空间位置。

.container {
  grid-template-columns: 50px 50px auto;
  grid-template-rows: 50px 50px auto;
}

pic.sm

fr 单位实际上就是表示一种比例。

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

表示网格容器中的三列宽度比例 1:1:1 平分整个容器宽度。

fr 是根据与其他长度值结合时的剩余空间计算的。

grid-template-columns: 3rem 25% 1fr 2fr;

第三列的宽度计算值等于 (容器宽度 - 3rem - 容器宽度 * 0.25) / 3。

第四列第宽度计算值等于 2 * (容器宽度 - 3rem - 容器宽度 * 0.25) / 3。

合并单元格效果​

  • grid-template-areas 用于给网格容器区域命名
  • grid-area 给网格子项引用网格区域名称（注意这是网格子项的属性）
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div> 
.container {
  width: 300px;
  height: 300px;
  background-color: pink;
  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
  "a1 a1 a2"
  "a1 a1 a2"
  "a3 a3 a3";
  
  > div:nth-child(1) {
    grid-area: a1;
    background-color: skyblue;
  }
  > div:nth-child(2) {
    grid-area: a2;
    background-color: orange;
  }
  > div:nth-child(3) {
    grid-area: a3;
    background-color: gold;
  }
}

这样第一个网格子项占的就是 4 * 4 的空间，第二个网格子项占的是 1 * 2 的空间，第三个网格子项占的是 2 * 1 的空间。

pic.sm

我们可以通过子项的 grid-area 控制其在对应的网格容器区域中。

> div:nth-child(1) {
  grid-area: a2;
}

当继续添加上面的样式到 .container 尾部时，网格中的第一个子项就处于 a2 的网格空间了。

pic.sm

此时第一个子项和第二个子项发生了重叠，第二个子项目覆盖了第一个子项目。调整第一个子项的 z-index 它就出现了。

> div:nth-child(1) {
  grid-area: a2;
  z-index: 1;
}

pic.sm

grid-template 简写属性​

该属性是下面三个属性的简写形式：

  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
grid-template: 
  "a1 a1 a2" 1fr
  "a1 a1 a2" 1fr
  "a3 a3 a3" 1fr
  / 1fr 1fr 1fr;

等价于：

grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: 
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3";

网格间隙​

  • row-gap 设置容器中子项与子项之间行间距
  • column-gap 设置容器中子项与子项之间的列间距
  • gap 上面两个属性的简写

当给 .container 添加上该属性时：

.container {
  row-gap: 20px;
  column-gap: 20px;
}

pic.sm

子项与子项之间就会出现 20px 的间隙了。需要注意如果网格大小是固定单位 px，那么间隙就可能导致子项目溢出容器。