css三行三列怎么写

CSS三行三列是前端开发经常使用的一个布局，可以让网页看起来更美观，并且提高用户体验。下面，我们将详细讲解如何实现CSS三行三列布局。

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.box {
  width: 30%;
  flex-basis: 30%;
} 

首先，我们需要先在HTML文件中创建一个容器（class为container），所有的卡片都将作为容器的子元素。接着，在CSS文件中，我们使用display: flex来将子元素排成一行，通过设置justify-content: space-between来使子元素之间有间距，flex-wrap: wrap来让卡片自动换行。

然后，我们设置每个卡片的宽度为30%，同时通过flex-basis: 30%来指定卡片的基础大小。这样，我们就可以在一个容器中创建三列。

<div class="container">
  <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> 

最后，在HTML文件中添加上述代码，即可实现CSS三行三列布局。