CSS Grid布局求助：如何让Main区块跨2行并控制跨区范围

问题核心 #

你当前的代码里，grid-row相关属性没生效，是因为你把.prominant类加在了Grid子元素内部的<main>标签上——Grid布局的跨行/跨列属性必须作用在Grid容器的直接子元素上，内部元素没法直接控制Grid的布局位置。

解决步骤 #

1. 调整类的位置：把.prominant类从<main>标签移到包裹它的那个div上（这个div必须是Grid容器的直接子元素）
2. 修改CSS样式：针对这个Grid直接子元素设置跨行规则，用grid-row: span 2;实现跨2行的效果

代码示例 #

调整后的HTML结构

<div class="grid-main">
  <!-- 把.prominant类移到这个Grid直接子元素上 -->
  <div class="prominant">
    <main>Main</main>
  </div>
  <!-- 其他Grid子元素示例 -->
  <div>Sidebar</div>
  <div>Extra Block</div>
</div>

修改后的CSS

/* 确保Grid容器的基础布局正确 */
.grid-main {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 示例列比例，可根据需求调整 */
  grid-template-rows: 1fr 1fr; /* 显式定义两行，让Main有行可跨 */
  gap: 12px; /* 子元素间距，可选 */
}

/* 针对Grid直接子元素设置跨行样式 */
.grid-main .prominant {
  grid-row: span 2; /* 直接指定跨2行 */
  background-color: rgb(63, 11, 11); /* 可选，用来区分区块 */
}

如何控制跨区范围 #

• 快速跨行：用grid-row: span N;，N就是你需要跨的行数（比如span 3就是跨3行）
• 精确控制起始/结束行：用grid-row: 起始行号 / 结束行号;，比如grid-row: 1 / 3;表示从第1行开始，到第3行结束（实际占据第1、2两行）
• 注意：如果Grid容器没有显式定义行（没写grid-template-rows），浏览器会自动生成隐式行，同样可以用上述规则跨行，但显式定义行能让布局更可控

内容的提问来源于stack exchange，提问作者Jeramiah Burke