[分享]css做平均分的格子

CSS是一种用于描述文档外观的语言，我们可以通过CSS来为网页设置样式。当设计一个网格布局时，如果我们需要把一个矩形区域分成若干个同样大小的小方格，我们可以尝试使用CSS来完成。下面我们来看一段CSS...

CSS是一种用于描述文档外观的语言，我们可以通过CSS来为网页设置样式。当设计一个网格布局时，如果我们需要把一个矩形区域分成若干个同样大小的小方格，我们可以尝试使用CSS来完成。

下面我们来看一段CSS代码，可以将一个矩形区域分成4x4的小方格，每个小方格大小都相等：

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  width: 400px;
  height: 400px;
  background-color: #ccc;
}

.container > div {
  background-color: #fff;
  text-align: center;
  font-size: 24px;
  line-height: 50px;
} 

这段代码中，我们首先创建了一个名为container的div元素，并使用display: grid;来将其设置为一个网格布局。接着，我们使用grid-template-columns和grid-template-rows属性来设置每行和每列的大小，这里我们使用repeat函数来重复声明每行/列的大小，1fr表示剩余可用空间平均分配给每列/行。

我们还通过gap属性设置了每个小方格之间的边距，并为整个矩形区域设置了宽度和高度，并设置背景颜色为灰色。接下来，我们为.container下的所有子元素设置了白色背景颜色，居中对齐，字体大小为24px，行高为50px。

这样，我们就成功地使用CSS将一个矩形区域平均分成若干个小方格，并为小方格设置了样式。