[分享]css两个格子合并

CSS中有一种很常用的技巧就是通过设置grid-row和grid-column来将两个格子合并在一起。下面来看一下具体的实现方法：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item-1 {
  grid-column: 1 / 3;
}

.grid-item-2 {
  grid-column: 3;
} 

上面的代码中，我们首先定义了一个grid容器，设置了该容器的3列。接着我们定义了两个Item，第一个Itemgrid-column属性设置为1 / 3表示跨越了第1和第2列，第二个Item的grid-column属性设置为3表示占领了第3列的位置。

这样就实现了两个格子的合并。通过设置不同的grid-column和grid-row的值可以实现不同的合并方式，非常方便实用。