How to wrap lists after 5 element?

user_2951257 0
Viewed 641

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. output

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>

flexbox html-lists css html
2 Answers

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.

user_825480

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.

user_23975500
Related