Grid布局初探

学习了flex布局后不久就看到了grid布局，最近刚好写了一个适用grid的布局，记录一下使用心得

我需要实现的是下图所示的布局

如果使用flex的话，第一块区域不好处理，如果使用常规的方法，就要嵌套不少的div

所以使用grid来尝个鲜

首先就像flex的使用方法一样，先给父容器添加

display: grid;

然后就可以定义行高和列宽了

grid-template-rows: calc((100% - 30)/3) calc((100% - 30)/3) calc((100% - 30)/3);
grid-template-columns: calc((100% - 30)/3) calc((100% - 30)/3) calc((100% - 30)/3);

因为这里每个网格使用了相同的高宽，所以可以使用更简单的写法

grid-template-rows: repeat(3, calc(100% - 30)/3);
grid-template-columns: repeat(3, calc(100% - 30)/3);

这部分还可以更简单一点，使用fr去替代calc()部分

grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);

fr是一个按照比例去划分剩余空间的单位，非常有用

接下来就是重点了，怎么让左上的四个网格连成一块区域呢？

首先在父容器加上grid-template-areas属性

grid-template-areas:"b1 b1 b2"
    "b1 b1 b3"
    "b4 b5 b6";

就是在这里用相同的名称标记一个网格，从而指定若干网格为同一区域

刚开始偷懒使用纯数字标记发现是无效的，需要注意一下

然后为每个单独的网格指定区域

.item1 {
  grid-area: b1;
}
.item2 {
  grid-area: b2;
}
.item3 {
  grid-area: b3;
}
.item4 {
  grid-area: b4;
}
.item5 {
  grid-area: b5;
}
.item6 {
  grid-area: b6;
}

在这里可以在线查看代码 DEMO1

下面是另一个项目中用到的布局

大同小异

DEMO2