How to display a list in two rows? - css

Question

I have a list of items that I want to fit in a space that is constrained vertically:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
Since I don't want the list to have more than a specific height, but I'm free to expan it horizontally, I want to divide the list into columns, like this:
One Two Three
Four Five Six
Or, alternatively (in my case order is not important)
One Three Five
Two Four Six
The css property column-count allows to break a list into columns, but it only accepts a fixed number of columns. I don't know the number of items I am going to have (it can go from 1 to more than 40), so if I set the number of columns to 3, any list with more than 6 items will be too high, and if there is only 4 items, then only the first column will have two items and it will look uneven.
So, ideally I would need a row-count property, but it doesn't exist. I guess I can do that in Javascript too but I'm looking for a CSS-only solution.
I tried something: float:left on every li puts the list in one row. To break it into two rows, I would need to not apply float:left to the N/2 element. I don't know how to do that.
I know also that I can do it by breaking it into multiple ul, each one with two li, and float:left them, but I would like to avoid messing the HTML for something entirely presentational.
Does someone has a solution for this problem?
Edit: I think I have not been clear in explaining my requirements. I want the list to be sorted into columns without knowing how many items I'm going to have, and so that I will always have two rows.
So for example with 7 items, I want to have:
One Two Three Four
Five Six Seven
And with 3 items:
One Two
Three

Answer 1

Here is a simple way to do it using jquery. I know it is mentioned that a CSS way is needed, but this is just for future reference if anyone wants to refer to this question.
Get the number of LI items and divide it by the number of rows and set that value to column-count property.
Jquery
$(document).ready(function() {
var numitems = $("#myList li").length;
$("ul#myList").css("column-count",Math.round(numitems/2));
});
CSS
ul {
width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}
HTML
<ul id="myList">
<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>
</ul>
Fiddle here
EDIT:
Same implementation using simple javascript.
var ul = document.getElementById("myList");
var li = ul.getElementsByTagName("li");
var numItems = li.length;
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }";
document.body.appendChild(css);
You need to set the width of UL, because number of rows will depend on the width also even after setting the column-count. You can set it to 100% too, but then the number of rows will change based on the window size. To restrict the number of rows to 2, fixed width for UL may be required.

Answer 2

You could set your li at 33% width and floating against each other, once there isn't enough room in a row they will be pushed down in rows of 3 of equal width.
ul li{
width: 33%;
float: left;
}

Answer 3

I know this question is 7 years old but if anyone has similar problem today, then here's a solution using CSS Grid Layout (https://www.w3.org/TR/css-grid-1/)
ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

Answer 4

Why not give it a max-width?
ul {
max-width: somevalue; // which would last when the third item ends
}
Or, you can add class to them as
<ul>
<li class="one">One</li>
<li class="one">Two</li>
<li class="one">Three</li>
<li class="two">Four</li>
<li class="two">Five</li>
<li class="two">Six</li>
</ul>
Now CSS as:
.one {
display: inline;
}
.two {
display: inline;
}
The last thing of the padding is as
ul li {
padding: somevalue;
}
And for slicing:
ul {
max-width: 200px; // to break the list
}
The good luck for you would be that you can first check the width of the list! And then slice it into two equal parts using JS, and then applying it.
If you want to get the CSS calucator, then use this:
width: calc(var1 + var2); // calc will do the math..
Here is the fiddle for this situation: http://jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/

Answer 5

you can use
li:nth-child(even)
li:nth-child(odd)
http://jsfiddle.net/nCmZT/

Answer 6

Source: Creating a two column Unordered List
Fiddle : Demo provided in the link
HMTL
<ul class="two-col-special">
<li>First Category</li>
<li>Second Category</li>
<li>Third Category</li>
<li>Fourth Category</li>
<li>Fifth Category</li>
</ul>
CSS
.two-col-special {
border: 1px dotted blue;
overflow: auto;
margin: 0;
padding: 0;
}
.two-col-special li {
display: inline-block;
width: 45%;
margin: 0;
padding: 0;
vertical-align: top; /* In case multi-word categories form two lines */
}
.two-col-special li:before {
content: '+';
padding: 5px;
margin-right: 5px; /* you can tweak the gap */
color: orange;
background-color: white; /* in case you want a color... */
display: inline-block;
}

Answer 7

Here's an example using display: flex and flex-direction: row to change the ordering from columns to rows:
#list-1 {
border: 3px solid red;
columns: 2;
column-gap: 5px;
width: 200px;
}
#list-2 {
border: 3px solid blue;
columns: 2;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: auto; /* can change this */
width: 200px;
}
#list-2 li {
width: 100px;
height: auto;
}
<ul id="list-1">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
<ul id="list-2">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>

Answer 8

I think the most easies and proper way {OL tag especially} would be:
<ul>
<div class="row">
<div class="col-6">
<li>One</li>
<li>Two</li>
<li>Three</li>
</div>
<div class="col-6">
<li>Four</li>
<li>Five</li>
<li>Six</li>
</div>
</div>
</ul>