Search code examples
htmlcssflexboxcss-multicolumn-layout

Column padding while using column-count and column-rule

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: enter image description here

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: enter image description here

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>

Solution

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