如何让新增CSS Grid侧边栏容器紧邻第一个容器下方？

你的问题出在没有给下方的侧边栏容器指定列位置，导致Grid把它们放到了content元素撑开的行底部。

原因分析 #

当前content元素占据了第2-3列，高度撑开了第一行的整体高度。你只给.sidebar-two和.right-bar-two设置了grid-row，但没指定列，Grid会默认把它们放在当前行的第一个可用列位置，但这个位置的行高被content拉得很高，所以容器就跑到页面底部了。

修复方案 #

给下方的侧边栏容器明确指定列位置，让它们和上方的容器处于同一列，Grid会自动在列内按顺序排列元素：

.sidebar-two {
  border: 1px solid #00639e;
  grid-column: 1; /* 固定在第1列 */
  /* 移除grid-row: 2 / 3; 不需要手动指定行 */
}

.right-bar-two {
  grid-column: 4; /* 固定在第4列 */
  /* 移除grid-row: 2; 不需要手动指定行 */
}

修改后的完整代码 #

CSS

.container {
  max-width: 1400px;
}

.text-gray {
  color: #c0c3c5;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.sidebar {
  border: 1px solid #ccc;
  border-radius: 4px;
  align-self: start;
  background: #fff;
  padding: 12px 8px;
}

.sidebar-two {
  border: 1px solid #00639e;
  grid-column: 1;
}

.right-bar {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  align-self: start;
}

.right-bar-two {
  grid-column: 4;
}

.content {
  grid-column: 2 / 4;
}

.content img {
  width: 100%;
  height: 200px;
}

.tags a {
  font-size: 0.75rem;
  font-family: "Noto Sans", sans-serif;
  line-height: 1.7;
  font-weight: 400;
  text-transform: capitalize;
  color: #1a1a1b;
}

.tags a:hover {
  transition: 250ms ease;
  color: #00639e;
}

.sub-title {
  font-family: "Noto Serif", serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.3px;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="grid-wrapper my-3">
    <div class="sidebar py-2">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 1</h1>
      <div class="tags d-flex flex-column">
        <a href="#">Hello World 1</a>
      </div>
    </div>
    <div class="sidebar-two py-2">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 2</h1>
      <div class="tags d-flex flex-column">
        <a href="#">This should be just below Sidebar Container 1</a>
      </div>
    </div>
    <div class="content">
      <div class="featured-image">
        <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" alt="Featured banner">
      </div>
    </div>
    <div class="right-bar tags px-2 pt-1">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 3</h1>
      <a href="#">Hello World 2</a>
    </div>
    <div class="right-bar right-bar-two tags px-2 pt-1">
      <h1 class="fw-bold text-gray fs-6">Sidebar Container 4</h1>
      <a href="#">This should be just below Sidebar Container 3</a>
    </div>
  </div>
</div>

这样修改后，.sidebar-two会紧贴在.sidebar下方，.right-bar-two紧贴在.right-bar下方，同时中间的content区域保持原有的布局。

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