Column padding while using column-count and column-rule

Question

I have created the column-count property to create a three-column layout inside my UL. I want each column to look separated from each other and use the column-rule property to achieve this.

Here is an example of what this looks like:

What I want to achieve is to add top and bottom padding to each column. If I add top and bottom padding to the UL, it looks like this:

Notice that they no longer look like three separate columns.

Does anyone know a way to add the padding to all columns without joining them together?

Key points:

• The number of items in this list could vary. (otherwise, I would have considered using nth-child in CSS).
• I have considered using flex with wrapping, however, I believe that requires a fixed height. (Correct me if I'm wrong.)
• The aim is to have all of the list items under one 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

You can approximate it by keeping your padding and changing the background coloration to create the gap with gradients:

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>

Another syntax with transparency:

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

already answered but going a bit further using css var to mind the a column-gap:

it is also average but lets you have an idea of the possibility to use a gradient.

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>