如何实现CSS栏并排？已有两栏布局HTML如何用CSS Grid对齐？

嘿，我来帮你搞定这两个问题！先聊聊通用的CSS栏并排对齐方法，再专门讲用CSS Grid实现两栏布局的具体操作。

这里有几个常用的方案，你可以根据场景选：

• 浮动（Float）：这是比较经典的老方法，适合需要兼容旧浏览器的场景。给要并排的栏设置浮动，记得给父容器清除浮动，避免高度塌陷。
  示例代码：

  <div class="column-container">
    <div class="col">左侧栏</div>
    <div class="col">右侧栏</div>
  </div>
  

  /* 清除父容器浮动，解决高度塌陷问题 */
  .column-container::after {
    content: "";
    display: table;
    clear: both;
  }
  .col {
    float: left;
    width: 50%; /* 两栏各占一半宽度 */
    box-sizing: border-box; /* 让padding和border不额外撑开元素宽度 */
    padding: 10px;
  }
  

• Flexbox：现代布局的首选，简单灵活，不用处理浮动的各种坑。
  示例代码：

  <div class="flex-container">
    <div class="flex-col">栏1</div>
    <div class="flex-col">栏2</div>
  </div>
  

  .flex-container {
    display: flex;
    gap: 20px; /* 栏之间的间距，可选 */
  }
  .flex-col {
    flex: 1; /* 让两栏平分容器宽度，也可以设固定width比如250px */
  }
  

• inline-block：把元素设为行内块级元素，也能实现并排，但要注意处理元素间的空白间隙。
  示例代码：

  <div class="inline-container">
    <div class="inline-col">左栏</div>
    <div class="inline-col">右栏</div>
  </div>
  

  .inline-container {
    font-size: 0; /* 消除子元素之间的空白间隙 */
  }
  .inline-col {
    display: inline-block;
    width: 50%;
    font-size: 16px; /* 恢复正常字体大小 */
    box-sizing: border-box;
  }
  

CSS Grid是专门为二维布局设计的，控制力超强，实现两栏布局非常直观。假设你的HTML结构是这样的：

<div class="grid-container">
  <div class="grid-item">内容区块1</div>
  <div class="grid-item">内容区块2</div>
</div>

基础两栏平分布局 #

最常用的就是让两栏平分容器宽度：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 1fr代表占容器剩余空间的1份，两个1fr就是平分 */
  gap: 15px; /* 栏之间的间距，可选 */
}

固定+自适应的两栏 #

如果需要一栏固定宽度，另一栏自适应剩余空间：

.grid-container {
  display: grid;
  grid-template-columns: 300px 1fr; /* 第一栏固定300px，第二栏占剩下的所有空间 */
}

元素对齐控制 #

默认情况下，Grid里的元素会拉伸填满单元格的高度和宽度，如果你需要自定义对齐方式：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; /* 垂直方向居中对齐元素 */
  justify-items: center; /* 水平方向居中对齐元素 */
  min-height: 200px; /* 给容器设个高度，方便看到对齐效果 */
}

多元素自动排两栏 #

如果你的容器里有多个元素，想让它们自动排成两栏（比如4个元素排成2行2列）：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 重复创建2个1fr的列 */
  gap: 10px;
}

这些方法里，Flexbox和CSS Grid是现在最推荐的，尤其是Grid，对付复杂布局的时候优势特别明显。根据你的实际需求选就行！

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