CSS 一行三列布局，可换行（含grid网格布局、flex弹性布局/inline-block布局 + 伪类选择器）

可以使用CSS Grid网格布局或Flexible Box布局来实现一行三列的布局，并且可以换行。

Grid 网格布局示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列占用1/3空间 */
  grid-gap: 10px; /* 网格间隙 */
}
 
.item {
  background-color: #f0f0f0; /* 背景颜色 */
  border: 1px solid #ccc; /* 边框 */
  padding: 20px; /* 内边距 */
  text-align: center; /* 文本居中 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多的.item元素会自动换行 -->
</div>

Flexible Box 弹性布局示例：

.container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}
 
.item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
  flex: 0 0 33.3333%; /* 占据100%宽度的1/3 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多的.item元素会自动换行 -->
</div>

这两种方法都可以实现一行三列的布局，并且当空间不足以放下第四个元素时能够自动换行。