如何让CSS Grid与第三个元素横向并排而非上下排列？

方法1：将Grid容器改为inline-grid #

默认display: grid的容器是块级元素，会独占一行。把它改成inline-grid后，容器会变为行内块级元素，就能和其他行内/行内块元素（比如你的<span>）横向排列。

修改后的SCSS代码：

.my-grid {
  display: inline-grid; /* 替换原有的grid */
  div {
    grid-column: 1;
    grid-row: 1;
  }
}

HTML保持原结构即可：

<div class="my-grid">
    <div> First element </div>
    <div> Second element </div>
</div>
<span> Third element </span>

这个方法无需额外嵌套容器，完全满足你不想修改HTML结构的需求。

方法2：用Flex容器包裹Grid和第三个元素 #

如果需要更灵活的布局控制（比如对齐方式、间距），可以在Grid和<span>外层添加Flex容器：

修改后的HTML：

<div class="flex-container">
  <div class="my-grid">
      <div> First element </div>
      <div> Second element </div>
  </div>
  <span> Third element </span>
</div>

添加对应的SCSS代码：

.flex-container {
  display: flex;
  gap: 1rem; /* 可选：设置Grid与第三个元素的间距 */
  align-items: center; /* 可选：实现垂直居中对齐 */
}

.my-grid {
  display: grid;
  div {
    grid-column: 1;
    grid-row: 1;
  }
}

这个方法适合后续需要调整整体布局的场景，Flex提供了丰富的对齐和空间分配能力。

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