Convert a list to 2 columns with just CSS

Question

I have a list I want to split into 2 cols.

I can do this but simply using

li {
  float: left;
  width: 50%;
}

but I want the 2 columns to be listed vertically, not horizontally.

Eg, instead of

 A B
 C D
 E F
 G H

I want:

 A E
 B F
 C G
 D H

I need to apply styles to all elements including and after the 5th child to float them right. Something like:

li {
  float: left;
  width: 50%;
}

li:nth-child(5):after {
 float: right;
}

Would anyone know if it is possible to do this using only CSS?

Try using columns https://css-tricks.com/almanac/properties/c/columns/ — K K, Jan 13 '17 at 04:40
@MeltingDog: If you don't mind could you make it clear in the question as to which part you needed to be answered (the selection or the other part). Based on your title and the acceptance of my answer, I assume it is the former but there has been some confusion around it and so it is better to clear it up. — Harry, Jan 13 '17 at 06:06
@Harry Actually I think I accepted your answer (which is still a very good answer) prematurely. I have tried to float the `li:nth-child(n+5)` elements to the right, but of course this doesn't create a the effect I want. I am trying to investigate the others answers too. To answer your questions, ideally I need to break the list out into two columns. If I were to use JQuery, I would wrap the last 5+ elements in there own `
` to make 2 separate lists, for example. Hope that helps. — MeltingDog, Jan 13 '17 at 06:10
@MeltingDog: If that's the case, could you please change your question title and unaccept my answer so that I can delete it? I don't want my answer to be bombarded with downvotes just because I answered what is asked and not what was the background question. — Harry, Jan 13 '17 at 06:12
@Harry hey, you're answer was still a good one and still did help me. I will remember it for other things. Time not wasted. — MeltingDog, Jan 13 '17 at 06:20

Jishnu V S · Answer 1 · 2017-01-13T05:21:16.243

You can use display:flex and order property, order. The order property is a sub-property of the Flexible Box Layout module. Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering. Run the snippet this is exactly like OP

ul {
 margin:0;
 padding:0;
 display: flex;
   flex-flow: row wrap;
}
ul li {
 width:50%;
 display:block;
}
ul li:nth-child(1){
 order: 1;
 width: 50%;
}

ul li:nth-child(2) {
 order: 3;
 width: 50%;
}
ul li:nth-child(3){
 order: 5;
 width: 50%;
}

ul li:nth-child(4) {
 order: 7;
 width: 50%;
}

ul li:nth-child(5){
 order: 2;
 width: 50%;
}

ul li:nth-child(6) {
 order: 4;
 width: 50%;
}
ul li:nth-child(7){
 order: 6;
 width: 50%;
}

ul li:nth-child(8) {
 order: 8;
 width: 50%;
}

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
</ul>

score 1 · Accepted Answer · answered Jan 13 '17 at 07:25

CSS3 can do columns! The great thing about column is that to clear it in responsive designs, you just change the count.

li {
  text-align: center;
  list-style-type: none;
}
div {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 5px; /* Chrome, Safari, Opera */
    -moz-column-gap: 5px; /* Firefox */
    column-gap: 5px;
    width: 49px;
}

<div>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  </div>

No messy floats, no changing display types, and it works on nearly every modern browser. Here's a Link from W3 Schools

score 0 · Answer 3 · answered Jan 13 '17 at 05:09

0

There are available online nth calculator generator. you can calculate nth according to your requirement by just filling numbers.

Check it out http://nth-calculator.com/

For now according to your requirement: :nth-child(n+5)

answered Jan 13 '17 at 05:09

kapil

341
2
11

Convert a list to 2 columns with just CSS

3 Answers3