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

Question

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

下面是一个例子：

我想要实现的是为每一列添加顶部和底部填充。如果我向 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>