ul { height: 100%; columns: 3; column-gap: 84px; column-fill: auto; } li { list-style: none; } 
 <ul> <li>ssdfsd</li> <li>2ttrw</li> <li>wecv</li> <li>34t3t334 gfgfg</li> <li>rg t43t rgrg</li> <li>rfh;k0</li> <li>sf9sdy9</li> <li>f fd98 sdl</li> <li>pop</li> <li>g9e8</li> <li>sdf sd0f98</li> <li>sdfkv09 90 s0</li> <li>nv 8s</li> </ul>

The problem is that there would be three columns (it is), but the distance between 2nd and 3rd should be greater than between 1st and 2nd. How can this be done with CSS?

    2 answers 2

     ul { height: 100%; columns: 3; column-gap: 84px; column-fill: auto; } li { list-style: none; } .two{padding-right:50px;padding-left:0px!important;} .three{padding-right:0px!important;padding-left:50px!important;} 
     <ul> <li class="one">ssdfsd</li> <li class="one">2ttrw</li> <li class="one">wecv</li> <li class="one">34t3t334 gfgfg</li> <li class="one">rg t43t rgrg</li> <li class="two">rfh;k0</li> <li class="two">sf9sdy9</li> <li class="two">f fd98 sdl</li> <li class="two">pop</li> <li class="two">g9e8</li> <li class="three">sdf sd0f98</li> <li class="three">sdfkv09 90 s0</li> <li class="three">nv 8s</li> </ul>

    • Thank! but it is desirable that automatically to any elements that fall into the third column, or into its area, by distance, have a greater distance to the second column ... - CodeGust
    • Using Jade I added an extra class to the last third of the elements (dividing the total by 3). It’s a pity I haven’t found a more beautiful way, with clean css - CodeGust

    Perhaps there is a simpler solution, but I would use the autocolumnlist plugin. It will split your list into three columns, each of them will have a .column class, and with the help of a pseudo :nth-of-type class :nth-of-type you can style each of the existing columns.

    • Thank! I do not use plugins in this case. : nth-of-type or something like that can help somehow, you need to think ... - CodeGust
    • one
      If the number of elements in the list is known, then the pseudo-class will solve the problem. Otherwise, I am afraid, it cannot be solved solely by means of css . - Igor