如何正确创建一个有三列响应式网格？

使用 CSS 弹性盒子模型（Flexbox）可以轻松创建响应式三列网格。

HTML 代码如下：

<div class="grid-container">
  <div class="grid-item">第一列</div>
  <div class="grid-item">第二列</div>
  <div class="grid-item">第三列</div>
</div>

CSS 代码如下：

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

.grid-item {
  flex: 0 1 calc(33.33% - 10px);
  /* 设定 margin 为 5px */
  margin: 5px;
}

解释：

• display: flex; 将容器元素设置为 flexbox。
• flex-wrap: wrap; 将其子元素按行显示，超出容器宽度的部分换行。
• justify-content: space-between; 设置三列水平等距分布，两端与容器边缘对齐。

对于子元素，我们设置了：

• flex: 0 1 calc(33.33% - 10px); 将 flex-basis 设置为 33.33%，减去 margin 的值。flex-grow 和 flex-shrink 为 0，表示不会调整宽度。
• margin: 5px; 设定 5px 的外边距，使其与容器边缘有间隙。

这样，我们就能得到一个三列宽度相等、有间隙、能够响应式显示的网格。