CSS Grid列未按预期显示：三列网格元素无法并排问题

你的Grid布局未按预期生效，核心原因是未给.main-grid容器添加display: grid属性——这是启用Grid布局的必要前提，缺少该属性时，元素会保持默认的块级布局，自然呈现上下堆叠的效果。

修正后的完整代码 #

CSS代码 #

.main-grid {
  display: grid; /* 新增该行，启用Grid布局 */
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 100%;
}

.main-col {
  grid-column: 2;
  grid-row: 1;
}

.right-box {
  grid-column: 3;
  grid-row: 1;
}

HTML代码 #

<div class="main-grid">
  <div class="main-col">
    <p>Test</p>
  </div>

  <div class="right-box">
    <p>Test 2</p>
  </div>
</div>

简化优化建议 #

由于网格项默认会占据第一行，你可以省略不必要的grid-row: 1声明，简化后的CSS代码如下：

.main-grid {
  display: grid;
  grid-template-columns: 25% 50% 25%;
}

.main-col {
  grid-column: 2;
}

.right-box {
  grid-column: 3;
}

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