CSS列有水平间隙？答案

【问题标题】：CSS columns have a horizontal gap?CSS列有水平间隙？
【发布时间】：2022-01-03 20:30:20
【问题描述】：

我在尝试对齐 CSS 列和网格时遇到了一些问题。默认情况下，css 列是否有一些水平间隙？如果有，如何配置？

【问题讨论】：

【解决方案1】：

是的。但是你可以通过将column-gap 设置为0 来摆脱它：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 20px 0;
}

.grid>div {
  height: 40px;
}

.css-cols {
  columns: 4;
  column-gap:0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.css-cols li {
  height: 20px;
  margin-bottom: 5px;
}

.grid>div:nth-child(odd),
.css-cols li:nth-child(odd) {
  background: black;
}

.grid>div:nth-child(even),
.css-cols li:nth-child(even) {
  background: red;
}

<div class="grid">
  <div></div>
  <div></div>
</div>

<ul class="css-cols">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

浏览器的默认间距用于列之间。为了多列布局 this 指定为 1em。

【讨论】：

谢谢！刚刚也想通了:)

【解决方案2】：

在这你可以使用for column gap is

grid-column-gap

对于行你可以使用

grid-row-gap

我建议你使用这个快捷键

grid-gap

这适用于行和列

【讨论】：