[分享]css写一个空的9宫格

9宫格是一种常用的布局方式，在CSS中实现9宫格布局也非常简单。下面我们来看一下如何用CSS实现一个空的9宫格。

.box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  row-gap: 1rem;
  column-gap: 1rem;
}

.box div {
  border: 1px solid #000;
  background-color: #fff;
} 

首先，我们需要创建一个父元素，并将其设置为grid布局。然后，我们使用grid-template-columns和grid-template-rows属性来定义9宫格的行和列。在这个例子中，我们将每行和每列都分成3个部分，每个部分的大小相等。

接下来，我们使用row-gap和column-gap属性来设置行和列之间的间距。在这个例子中，我们将它们都设置为1rem。

最后，我们使用一个子元素来填充每个单元格，并将其设置为1px的黑色边框和白色背景。如果您需要在单元格中放置其他元素，请将它们添加到这个div中。

这样，我们就完成了一个空的9宫格布局。您可以通过添加内部元素来填充它。