如何让12列Grid布局的左、中、右区块各占4列？

你的问题核心有两个：

• 左侧、中间、右侧区块的父元素<main>没有设置为Grid容器，导致它们无法继承外层.container的Grid布局规则，自然无法在同一行排列。
• 列范围设置错误，当前的列起止没有实现每个区块占4列的目标，同时还有其他小的Grid属性错误。

修复步骤： #

1. 将<main>设置为Grid容器 #

给main添加Grid布局属性，让它内部的子元素可以使用12列网格：

main {
  grid-column: 1 / 13; /* 简化写法，等价于原start/end设置 */
  background: grey;
  display: grid; /* 关键：让main成为Grid容器 */
  grid-template-columns: repeat(12, 1fr); /* 和外层保持一致的12列结构 */
  grid-gap: inherit; /* 继承外层的间距，保持布局统一 */
}

2. 修正span-12的列跨度 #

之前的span 13超出了12列的范围，改为正确的12列跨度：

.span-12 {
  grid-column: span 12; /* 或者写1 / 13 */
  background: red;
  padding: 30px;
}

（无需手动指定grid-row，Grid会自动按顺序排列元素）

3. 调整三个区块的列范围，实现各占4列 #

12列网格中，每个区块占4列的正确列起止应该是：

• 左侧：第1列到第5列（共4列）
• 中间：第5列到第9列（共4列）
• 右侧：第9列到第13列（共4列）

修改后的CSS：

.left {
  grid-column: 1 / 5;
  background: green;
  padding: 30px;
}

.middle {
  grid-column: 5 / 9;
  background: yellow;
  padding: 30px;
}

.right {
  grid-column: 9 / 13;
  background: orange;
  padding: 30px;
}

（无需手动指定grid-row，Grid会自动将它们放在同一行）

4. 修正footer的行位置 #

之前的grid-row: 9 / 10是错误的，改为指定正确的行号：

footer {
  grid-column: span 12;
  grid-row: 5 / 6; /* 前面元素到第4行，footer自动排在第5行 */
  background: #3bbced; /* 可选：添加背景色方便查看布局 */
  padding: 30px;
}

完整修改后的代码： #

CSS部分 #

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  position: relative;
}

header {
  grid-column: 1 / 13;
  background: #3bbced;
  padding: 30px;
}

nav {
  grid-column: 1 / 13;
  background: #3bbced;
  padding: 30px;
}

main {
  grid-column: 1 / 13;
  background: grey;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: inherit;
}

.span-12 {
  grid-column: span 12;
  background: red;
  padding: 30px;
}

.left {
  grid-column: 1 / 5;
  background: green;
  padding: 30px;
}

.middle {
  grid-column: 5 / 9;
  background: yellow;
  padding: 30px;
}

.right {
  grid-column: 9 / 13;
  background: orange;
  padding: 30px;
}

footer {
  grid-column: span 12;
  grid-row: 5 / 6;
  background: #3bbced;
  padding: 30px;
}

HTML部分 #

（HTML无需修改，保持原有结构即可）

<div class="container">
  <header class="logo">Header</header>
  <nav>
    <ul>
      <a href="#">Home</a>
      <a href="/">Menu</a>
      <a href="/">Book</a>
      <a href="/">About</a>
    </ul>
  </nav>
  <main>
    <article class="span-12">Ipsum</article>
    <section class="left">Ipsum</section>
    <section class="middle">Ipsum</section>
    <section class="right">Ipsum</section>
  </main>
  <footer>
    <div class="footer-col-left">small logo</div>
    <div class="footer-col-right">copywrite</div>
  </footer>
</div>

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