I am creating a list of divs with css variables names using column-count attribute, first column is cut at the end (4px) and second column starts with small padding (4px). Do you know how to get rid of that and keep this functionality of splitting divs automatically into 2 columns?

    .components {
        &__variable-list {
        column-count: 2;
        column-gap: 2rem;
        padding-bottom: .5rem;
      }

      &__variable {
          padding: .25rem .5rem;
          font-size: .875rem;

          &:nth-child(odd) {
              background-color: #e4e4e4;
          }

          &:nth-child(even) {
              background-color: #fff;
          }
      }
    }

<div >
    <div >--cwc-tab-border-color</div>
    <div >--cwc-tab-color</div>
    <div >--cwc-tab-focus-color</div>
    <div >--cwc-tab-hover-color</div>
    <div >--cwc-tab-active-color</div>
    <div >--cwc-tab-active-border-color</div>
    <div >--cwc-tab-heading-active-color</div>
    <div >--cwc-tab-no-padding-active-color</div>
    <div >--cwc-tab-no-padding-border-color</div>
    <div >--cwc-tab-disabled-color</div>
    <div >--cwc-tab-single-color</div>
</div>

CodePudding user response：

You can fix that if you add break-inside: avoid; to your __variable class like so:

.components__variable-list {
  column-count: 2;
  column-gap: 2rem;
  padding-bottom: 0.5rem;
}

.components__variable {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  break-inside: avoid;
}
.components__variable:nth-child(odd) {
  background-color: #e4e4e4;
}

.components__variable:nth-child(even) {
  background-color: #fff;
}

<div >
  <div >--cwc-tab-border-color</div>
  <div >--cwc-tab-color</div>
</div>
<hr />
<div >
  <div >--cwc-tab-border-color</div>
  <div >--cwc-tab-color</div>
  <div >--cwc-tab-border-color</div>
  <div >--cwc-tab-border-color</div>
  <div >--cwc-tab-color</div>
  <div >--cwc-tab-border-color</div>
  <div >--cwc-tab-border-color</div>
  <div >--cwc-tab-color</div>
  <div >--cwc-tab-border-color</div>
</div>