css三行三列布局

CSS三行三列布局，顾名思义就是使用CSS实现三行三列的网格布局，可以用于制作图片墙、相册排版等多种场景。本文将介绍如何使用CSS实现三行三列布局。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
  text-align: center;
  font-size: 24px;
} 

首先，我们需要在HTML中创建一个容器元素，用于包裹九个子元素。我们可以使用div元素，并给它一个class名为grid-container。然后，我们在容器元素内创建九个子元素，并给它们一个class名为grid-item。

接下来，我们使用CSS中的grid布局实现三行三列的网格布局。我们给grid-container设置display属性为grid，这样容器元素就变成了一个网格容器。然后，我们使用grid-template-columns属性和grid-template-rows属性分别设置容器元素的列和行的大小。这里我们采用了repeat()和1fr单位来创建三列三行的等宽等高布局。最后，我们使用gap属性设置子元素之间的间隔。

最后，我们对每个子元素设置背景颜色、内边距、居中对齐和字体大小等样式，以达到美化的效果。