[分享]css中如何用div做出九宫格

CSS中使用div标签可以轻松制作出九宫格布局，只需简单的CSS样式设置即可完成。

.layout {
  display: grid; /*启用CSS网格布局*/
  grid-template-columns: repeat(3, 1fr); /*设置3列的平均宽度布局，fr是自适应可用空间*/
  grid-template-rows: repeat(3, 1fr); /*设置3行的平均高度布局*/
  gap: 10px; /*设置宫间距*/
}

.box {
  background-color: #eee; /*设置宫块的背景颜色*/
  text-align: center; /*设置宫块中的文本居中显示*/
  padding: 20px; /*设置宫块中内容内边距*/
} 

在HTML中，使用div标签包裹宫块内容，外层再嵌套一个div标签作为整体九宫格的容器。代码如下：

<div class="layout">
  <div class="box">
    宫块1
  </div>
  <div class="box">
    宫块2
  </div>
  <div class="box">
    宫块3
  </div>
  <div class="box">
    宫块4
  </div>
  <div class="box">
    宫块5
  </div>
  <div class="box">
    宫块6
  </div>
  <div class="box">
    宫块7
  </div>
  <div class="box">
    宫块8
  </div>
  <div class="box">
    宫块9
  </div>
</div> 

通过以上代码，即可完成一个简单的CSS九宫格。这种方式对于多数需要按照一定网格显示的场景都可以使用。