[分享]css3布局div实例

在CSS3中，布局div使用的方法有很多，本文就为大家介绍其中一种：

.container {
  display: grid; //设置容器为网格布局
  grid-template-columns: repeat(3, 1fr); //定义三列，每列宽度平分
  grid-template-rows: repeat(3, 1fr); //定义三行，每行高度平分
  gap: 20px; //设置网格之间的间距为20px
}

.box {
  background-color: #ccc; //设置盒子的背景颜色
  color: #fff; //设置盒子内文字的颜色
  padding: 20px; //设置盒子内文字与边框之间的间距为20px
  text-align: center; //设置盒子内文字居中
}

.box:nth-child(4) { 
  grid-row: span 2; //将第四个盒子跨越2行
  grid-column: 2 / 4; //将第四个盒子占据第2列到第4列
} 

代码中，我们使用了grid布局来定义一个容器，将容器划分成了3行3列的网格，并且将网格之间的间距设为20px。

接着我们定义了一个盒子.box，设置了背景颜色、文字颜色、文字与边框之间的间距以及文字居中等样式。

最后，我们使用:nth-child()伪类选择器来选择第4个盒子，将它跨越2行并占据第2列至第4列的位置。

以上便是使用CSS3布局div的一个实例，希望对大家有所帮助。