使用CSS Grid实现图文交替布局失败，请求技术指导

首先你代码里有个明显的语法错误：grid-template-columns. auto auto auto; 这里的点号是笔误，应该改成冒号 :，这是导致Grid布局失效的直接原因之一。

但即使修正了语法，你的三列Grid设置也不符合「每组图→文/文→图交替」的需求——因为你把所有图和文都塞进了一个三列Grid容器，会导致元素按顺序填充三列，无法实现每组独立的交替排列。

正确的实现思路 #

把每组图文单独包裹在一个子容器里，给每个子容器设置两列Grid布局，然后通过选择器控制偶数组的元素排列顺序，实现交替效果：

HTML结构示例

<div class="grid-wrapper">
  <!-- 第一组：图→文 -->
  <div class="content-group">
    <img src="your-image-1.jpg" alt="图片1">
    <div class="text-content">
      <h3>标题1</h3>
      <p>这里是第一组的文字内容...</p>
    </div>
  </div>
  <!-- 第二组：文→图 -->
  <div class="content-group">
    <img src="your-image-2.jpg" alt="图片2">
    <div class="text-content">
      <h3>标题2</h3>
      <p>这里是第二组的文字内容...</p>
    </div>
  </div>
  <!-- 第三组：图→文 -->
  <div class="content-group">
    <img src="your-image-3.jpg" alt="图片3">
    <div class="text-content">
      <h3>标题3</h3>
      <p>这里是第三组的文字内容...</p>
    </div>
  </div>
</div>

CSS样式

/* 外层容器：负责组与组之间的间距 */
.grid-wrapper {
  display: grid;
  gap: 30px; /* 替代旧的grid-gap，现在标准写法是gap */
  padding: 20px;
}

/* 每组图文的Grid布局 */
.content-group {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等分空间 */
  gap: 15px;
  align-items: center; /* 让图文垂直居中对齐 */
}

/* 控制偶数组的元素排列顺序，实现文→图 */
.content-group:nth-child(even) img {
  grid-column: 2; /* 图片放到第二列 */
}
.content-group:nth-child(even) .text-content {
  grid-column: 1; /* 文字放到第一列 */
}

/* 可选：响应式适配，小屏幕下改成单列 */
@media (max-width: 768px) {
  .content-group {
    grid-template-columns: 1fr;
  }
  /* 小屏幕下不需要交替，重置列位置 */
  .content-group:nth-child(even) img,
  .content-group:nth-child(even) .text-content {
    grid-column: auto;
  }
}

为什么这个方案有效 #

1. 每组图文独立控制布局，避免了全局Grid的混乱填充
2. 使用nth-child(even)精准选择偶数组，通过grid-column调整元素位置实现交替
3. 用1fr代替auto，确保两列始终平分容器宽度，布局更稳定

内容的提问来源于stack exchange，提问作者Xavi Marquez