How to wrap lists after 5 element? - html

Question

We have an unordered list that will display up to 10 items. How can we setup the list so that it will place the first five items on the left and put the next five items into the next column (splitting equally)?
Here is the current and desired output. We tried to use CSS Flexbox, but cannot find a way to do it. Open to other ideas if flexbox cannot get it done.
Here is the current results and desired outputs.
ul {
display: flex;
flex-direction: column;
flex: 0 1 auto;
}
<div>
<ul>
<li>Assertively mesh</li>
<li>client-centered</li>
<li>niches and covalent networks</li>
<li>Uniquely e-enable</li>
<li>team driven benefits</li>
<li>rather than exceptional</li>
<li>architectures Continually</li>
<li>foster cutting-edge</li>
<li>open-source core</li>
<li>process-centric</li>
</ul>
</div>

Answer 1

To arrange content into predictable columns, each of five items, would seem to be a job for display: grid:
ul {
/* set the layout to grid: */
display: grid;
/* define the number of rows you
require: */
grid-template-rows: repeat(5, 1fr);
/* set the flow of the grid to follow
a columnar layout: */
grid-auto-flow: column;
}
<div>
<ul>
<li>Assertively mesh</li>
<li>client-centered</li>
<li>niches and covalent networks</li>
<li>Uniquely e-enable</li>
<li>team driven benefits</li>
<li>rather than exceptional</li>
<li>architectures Continually</li>
<li>foster cutting-edge</li>
<li>open-source core</li>
<li>process-centric</li>
</ul>
</div>
JS Fiddle demo.
Although, if you really want to use flex-box, you can:
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
/* Use the flexbox layout: */
display: flex;
/* set the content direction to
columns: */
flex-direction: column;
/* let the contents wrap to
new columns once the
boundaries of the element are
reached: */
flex-wrap: wrap;
/* set the height of the containing
element, in order for the wrapping
to occur: */
height: 10em;
/* entirely irrelevant: */
list-style: none;
max-width:500px;
}
li {
/* set the height of the individual
'rows' to be 20% of the total height
of the parent, to enforce the five-
items per 'column': */
height: 2em;
line-height: 2em;
width: 45%;
}
/* Irrelevant, but allows 'column-headings'
to be styled: */
li:nth-child(5n + 1) {
font-weight: bold;
border-bottom: 1px solid #000;
}
<div>
<ul>
<li>Assertively mesh</li>
<li>client-centered</li>
<li>niches and covalent networks</li>
<li>Uniquely e-enable</li>
<li>team driven benefits</li>
<li>rather than exceptional</li>
<li>architectures Continually</li>
<li>foster cutting-edge</li>
<li>open-source core</li>
<li>process-centric</li>
</ul>
</div>
JS Fiddle demo.

Answer 2

I would use CSS columns for this:
ul {columns: 2;}
li {list-style-position: inside;}
<ul>
<li>Assertively mesh</li>
<li>client-centered</li>
<li>niches and covalent networks</li>
<li>Uniquely e-enable</li>
<li>team driven benefits</li>
<li>rather than exceptional</li>
<li>architectures Continually</li>
<li>foster cutting-edge</li>
<li>open-source core</li>
<li>process-centric</li>
</ul>
Note that 'display: grid' has pretty bad browser support, while columns (and flexbox) score better.