Grid布局

介绍

CSS Grid 可轻松构建复杂的 Web 设计。它的工作原理是将 HTML 元素转换为具有行和列的网格容器，以便将子元素放置在网格中所需的位置。

通过将元素的父级设置 display: grid; 转化为网格布局。

  
1
  
2
  
3
  
4
  
5
  
6

.grid-wrap {display: grid;}

设置列

grid-template-columns 将网格划分为 n 列，并设置一个宽度，属性的参数数量就是划分为具体的多少列

.grid-wrap {
  display: grid;
  grid-template-columns: 50px 200px 80px;
}

设置行

grid-template-rows 设置网格的每一行的高度

.grid-wrap {
  display: grid;
  grid-template-columns: 50px 200px 80px;
  grid-template-rows: 50px 80px;
}

通过单位更改行和列的宽和高

fr 自适应单位，根据剩余的宽度分配所占比例

auto 将元素设置为自身的宽高

% 根据容器的宽和高去计算百分比

下边示例设置为 2 列 3 行，第一列为 80px，第二列的宽度 = 容器总宽度 - 第一列宽度；第一行的高度为 50px，第二行的高度 = 容器总高度 - 第一行高度 - 第三行高度，第三行高度为容器的 30%

.grid-wrap {
  display: grid;
  grid-template-columns: 80px auto;
  grid-template-rows: 50px 1fr 30%;
  width: 330px;
  height: 400px;
}

设置每列与每行之间的空隙

grid-column-gap 设置每列之间的空隙

grid-row-gap 设置每行之间的空隙

.grid-wrap {
  display: grid;
  grid-template-columns: 80px 200px 1fr;
  grid-template-rows: 50px 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 5px;
  width: 330px;
  height: 150px;
}

未完 …