使用 column-count 和 column-rule 时的列填充

Question

我创建了列数属性以在我的 UL 中创建一个三列布局。我希望每一列看起来彼此分开，并使用列规则属性来实现这一点。

这是一个例子：

我想要实现的是为每一列添加顶部和底部填充。如果我向 UL 添加顶部和底部填充，它看起来像这样：

请注意，它们看起来不再像三个单独的列。

有谁知道在不将它们连接在一起的情况下向所有列添加填充的方法吗？

要点：

此列表中的项目数可能会有所不同。（否则，我会考虑在 CSS 中使用 nth-child）。
我考虑过将 flex 与包装一起使用，但是，我认为这需要固定的高度。（如果我错了请纠正我。）
目的是让所有列表项都在一个 UL 下。

body {
  font-family: system-ui;
  background: white;
  
  text-align: center;
}


ul{
  font-size: 1.3rem;
  line-height: 2.3em;
  flex-basis: 100%;
  flex-wrap: wrap;
  background: pink;
  margin: 0px;  
  column-count: 3;
  column-rule: 15px solid 
    white;
  list-item-style: none;
  list-style: none;
    margin: 0px;
  padding: 10px 0px;
  
  
  
}

li{
    border: 1px solid red;
    margin: 0px;
  }

<ul>
  <li>
    <a href="#">Test item</a>
  </li>
 <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
</ul>

Answer 1

您可以通过保持填充并更改背景颜色来创建渐变间隙来近似它：

body {
  font-family: system-ui;
  background: white;
  text-align: center;
}

ul {
  font-size: 1.3rem;
  line-height: 2.3em;
  flex-basis: 100%;
  flex-wrap: wrap;
  background: 
    linear-gradient(#fff,#fff) calc(1*100%/3 - 5px) 0,
    linear-gradient(#fff,#fff) calc(2*100%/3 + 5px) 0,
    pink;
  background-size:15px 100%;
  background-repeat:no-repeat;
  margin: 0px;
  column-count: 3;
  column-rule: 15px solid white;
  column-gap:  15px;
  list-item-style: none;
  list-style: none;
  margin: 0px;
  padding: 10px 0px;
}

li {
  border: 1px solid red;
  margin: 0px;
}

<ul>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
</ul>

另一种透明语法：

body {
  font-family: system-ui;
  background: #f3f3f3;
  text-align: center;
}

ul {
  font-size: 1.3rem;
  line-height: 2.3em;
  flex-basis: 100%;
  flex-wrap: wrap;
  background: 
    linear-gradient(pink 0 0) left,
    linear-gradient(pink 0 0) center,
    linear-gradient(pink 0 0) right;
  background-size:calc((100% - 30px)/3) 100%;
  background-repeat:no-repeat;
  margin: 0px;
  column-count: 3;
  column-rule: 15px solid transparent;
  column-gap:  15px;
  list-item-style: none;
  list-style: none;
  margin: 0px;
  padding: 10px 0px;
}

li {
  border: 1px solid red;
  margin: 0px;
}

<ul>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
</ul>

Answer 2

已经回答，但使用 css var 更进一步来注意 a column-gap:

它也很平均，但可以让您了解使用渐变的可能性。

html,
body {
  font-family: system-ui;
  background: white;
  margin: 0;
  text-align: center;
}

ul {
  --colGapSize: 15px;
  --colGapSizeBg: calc( var(--colGapSize) / 2);
  font-size: 1.3rem;
  line-height: 2.3em;
  background: linear-gradient(to right, 
  pink calc(33.33% - var(--colGapSizeBg)), 
  white calc(33.33% - var(--colGapSizeBg)), 
  white calc(33% + var(--colGapSizeBg)), 
  pink calc(33% + var(--colGapSizeBg)), 
  pink calc(67% - var(--colGapSizeBg)), 
  white calc(67% - var(--colGapSizeBg)), 
  white calc(66.66% + var(--colGapSizeBg)), 
  pink calc(66.66% + var(--colGapSizeBg)))
  ;
  margin: 0px;
  column-count: 3;
  column-gap: var(--colGapSize);
  list-style: none;
  margin: 0px;
  padding: 10px 0px;
}

li {
  border: 1px solid red;
  margin: auto;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
}

<ul>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
</ul>

使用 column-count 和 column-rule 时的列填充

Column padding while using column-count and column-rule

html

css

flexbox

css-multicolumn-layout