如何用CSS Grid实现响应式布局：左侧图片与链接无间隙衔接

你要的布局完全可以用CSS Grid实现，核心是放弃固定行高，利用Grid的自动行计算+跨列/跨行定位，既满足移动端的顺序要求，又解决桌面端左侧元素间隙问题。

实现步骤 #

1. 基础HTML结构

保持移动端所需的自然顺序（图片→文章→相关链接），不用调整DOM结构：

<div class="news-container">
  <div class="news-image">
    <!-- 图片内容 -->
    <img src="your-image.jpg" alt="新闻配图">
  </div>
  <div class="news-article">
    <!-- 文章内容，高度随文本自动变化 -->
    <h2>新闻标题</h2>
    <p>正文内容...正文内容...正文内容...</p>
  </div>
  <div class="news-related">
    <!-- 相关链接，数量可变 -->
    <h3>相关阅读</h3>
    <ul>
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
    </ul>
  </div>
</div>

2. 移动端样式（移动优先）

默认流式布局，直接使用Grid单列排列，保持DOM顺序：

.news-container {
  display: grid;
  gap: 1.5rem; /* 区块间的间距，可自定义 */
  padding: 1rem;
}

/* 基础区块样式，按需调整 */
.news-image img {
  width: 100%;
  height: auto;
}
.news-article, .news-related {
  padding: 1rem;
  background: #fff;
  border-radius: 4px;
}

3. 桌面端样式（断点自定义，比如768px）

核心是设置两列布局，让右侧文章跨占所有左侧行，左侧元素自动按内容高度排列：

@media (min-width: 768px) {
  .news-container {
    grid-template-columns: 1fr 2fr; /* 左侧占1份，右侧占2份，比例可调整 */
    grid-auto-rows: min-content; /* 关键：行高由内容决定，不被其他元素强制拉伸 */
  }

  /* 左侧元素定位 */
  .news-image {
    grid-column: 1;
    grid-row: 1;
  }
  .news-related {
    grid-column: 1;
    grid-row: 2; /* 自动紧跟图片下方，无多余间隙 */
  }

  /* 右侧文章跨占所有左侧行 */
  .news-article {
    grid-column: 2;
    grid-row: 1 / -1; /* 从第一行到最后一行，自动填满右侧高度 */
  }
}

为什么这个方案能解决你的问题？ #

• 不再用固定的50%/50%行高，grid-auto-rows: min-content让左侧行高完全由图片、链接的实际内容决定，不会被右侧文章的高度撑大。
• 右侧文章通过grid-row: 1 / -1自动占据右侧所有行，不管左侧有多少元素（哪怕以后加新模块），都能完美适配高度。
• 保持了DOM的移动端顺序，符合语义化和移动优先的设计原则，不需要额外的JS或布局hack。

内容的提问来源于stack exchange，提问作者William Turrell