4 合并grid列_grid布局笔记4——grid-template-areas

grid布局允许指定“区域”(area)，一个区域由单个或多个单元格组成。为什么要指定区域呢？其实就是为了更轻松的完成页面的布局，我们知道，grid布局，允许设置几行几列的网格布局，但实际应用中，有些布局单单设置几行几列无法完成，例如这种布局——

我们可以看到，标号4的单元格占据了两列的宽度，那么上面的布局我们应该设置几行几列呢？为了应付这种布局需求，我们就用到这一个属性——grid-template-areas属性用于定义区域。，这是一个容器属性。

.container{ display: grid; grid-template-columns: repeat(3,100px) ; grid-template-rows: repeat(3,100px) ; grid-template-areas: ' a b c ' ' d e f ' ' g h i ' ; gap: 5px 10px ;}

在上面代码，我们使用，grid-template-rows和grid-template-columns将容器分为3行3列，共九个单元格，然后将这九个单元格命名为从a 到 i 的九个区域，要想实现上面图片的布局很简单将grid-template-areas改一下

grid-template-areas: ' a b c ' ' d d