CSS 列有水平间隙？

Question

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

Answer 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>

The browser's default spacing is used between columns. For multi-column layout this is specified as 1em.

Answer 2

在此你可以使用 for column gap is

grid-column-gap

对于行，您可以使用

grid-row-gap

我建议你使用这个快捷键

grid-gap

这适用于行和列

CSS 列有水平间隙？

CSS columns have a horizontal gap?

css

css-multicolumn-layout