Set different color in every column css?-CodePudding

I am facing one problem in column-count css property. Here I have a list like this--

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
</Ul>

I have to do this like image--

I can add 4 column by following css

.list {
   column-count: 4
}

But How can I give this red and white color after one another. I can't understand this.

Note: I have to create ul, li. I can't change this.

CodePudding user response：

As you don't know what the contents of the various li elements might be - they may take up very differing heights - you can't tell in advance which li element will be in which column.

It is therefore not safe to use nth-child other than under the most simplistic of circumstances (every li taking up the same space).

A different method is to set a background image on the ul element which has 'stripes' red and white going across each taking 25% of the width. The coloring is thus responsive.

.list {
  column-count: 4;
  background-image: linear-gradient(to right, white 0 25%, red 25% 50%, white 50% 75%, red 75% 100%);
}

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
</Ul>

CodePudding user response：

It is better to use a different layout method instead of column-count: 4 because you can't use odd even functionality here and have to define color value to individual column created using nth:child

.list {
  column-count: 4;
}

.list :nth-child(n 5) {
  background: #FF0705;
}

.list :nth-child(n 9) {
  background: blue;
}

.list :nth-child(n 13) {
  background: green;
}

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
  <li>thirteen</li>
  <li>fourteen</li>
  <li>fifteen</li>
  <li>sixteen</li>
</ul>

A simple approach to 4 columns but you can look into display: flex property too.

#list {
  display: flex;
}

div span {
  display: block;
}

div:nth-child(even) {
  background: #FF0705;
}

<div id="list">
  <div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
  </div>
  <div>
    <span>five</span>
    <span>six</span>
    <span>seven</span>
    <span>eight</span>
  </div>
  <div>
    <span>nine</span>
    <span>ten</span>
    <span>eleven</span>
    <span>twelve</span>
  </div>
  <div>
    <span>thirteen</span>
    <span>fourteen</span>
    <span>fifteen</span>
    <span>sixteen</span>
  </div>
</div>