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

在 HTML 中，我们可以使用 div 元素来创建该三列响应式网格。我们为左、中、右三列分别创建一个 div 元素，并使用 CSS 进行布局和样式设计。

HTML 代码示例：

<div class="grid-wrapper">
  <div class="left-column"></div>
  <div class="middle-column"></div>
  <div class="right-column"></div>
</div>

CSS 代码示例：

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

.left-column, .middle-column, .right-column {
  width: 30%;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .left-column, .middle-column, .right-column {
    width: 100%;
  }
}

解释：

首先，我们将包含该三列网格的 div 元素设置为 flex 容器，并使用 flex-wrap 属性指定网格是一个多行容器。我们还使用 justify-content 属性指定不同列之间的对齐方式为“空白”（space-between），这将使左列和右列分别位于容器左侧和右侧，中间列则在它们中间。

接下来，我们为每一列指定宽度为 30%，并为它们设置底部边距为 20px。这些样式可以根据需要进行调整。

最后，我们使用媒体查询（media query）来针对小屏幕设备（例如手机和平板电脑）对网格进行调整。在这种情况下，我们将每一列的宽度设置为 100%，以使它们在单独的行中堆叠在一起。

注意：这只是一个基本示例，您可以根据需要进行更改和定制。