CODEWITHSUNDEEP
htmlcss
Jakub Zavazal
Jakub Zavazal

Reputation: 60

When using column-count attribute, first column is cut and second column starts with unwanted padding

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

    .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 class="components__variable-list">
    <div class="components__variable">--cwc-tab-border-color</div>
    <div class="components__variable">--cwc-tab-color</div>
    <div class="components__variable">--cwc-tab-focus-color</div>
    <div class="components__variable">--cwc-tab-hover-color</div>
    <div class="components__variable">--cwc-tab-active-color</div>
    <div class="components__variable">--cwc-tab-active-border-color</div>
    <div class="components__variable">--cwc-tab-heading-active-color</div>
    <div class="components__variable">--cwc-tab-no-padding-active-color</div>
    <div class="components__variable">--cwc-tab-no-padding-border-color</div>
    <div class="components__variable">--cwc-tab-disabled-color</div>
    <div class="components__variable">--cwc-tab-single-color</div>
</div>

Upvotes: 1

Views: 144

Answers (1)

YourBrainEatsYou
YourBrainEatsYou

Reputation: 1049

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 class="components__variable-list">
  <div class="components__variable">--cwc-tab-border-color</div>
  <div class="components__variable">--cwc-tab-color</div>
</div>
<hr />
<div class="components__variable-list">
  <div class="components__variable">--cwc-tab-border-color</div>
  <div class="components__variable">--cwc-tab-color</div>
  <div class="components__variable">--cwc-tab-border-color</div>
  <div class="components__variable">--cwc-tab-border-color</div>
  <div class="components__variable">--cwc-tab-color</div>
  <div class="components__variable">--cwc-tab-border-color</div>
  <div class="components__variable">--cwc-tab-border-color</div>
  <div class="components__variable">--cwc-tab-color</div>
  <div class="components__variable">--cwc-tab-border-color</div>
</div>

Upvotes: 1

Related Questions