HTML list split into equal sized chunks in CSS

Question

I have a list with 8 items as this:

<ul>
  <li>List Item 01</li>
  <li>List Item 02</li>
  <li>List Item 03</li>
  <li>List Item 04</li>
  <li>List Item 05</li>
  <li>List Item 06</li>
  <li>List Item 07</li>
  <li>List Item 08</li>
</ul>

With this list, I want to Keep a fixed width space in between item 04 and 05. And first four items should be align to right of that space and last four to align to left as below image I attached.

I tried it something like this:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

ul li:nth-child(4) {
  margin-right: 10em;
}

It seems ok for me, but one thing is when the list have 4 or 6 items then it should group 2 or 3.

Can anybody tell what would be the solution for this. Its good if I have CSS only solution.

Thank you.

Answer 1

Its interesting!

Need find the middle one to do something without use js.

So i use odd and even to split in half, then use pseudo-element to become the middle one.

see below.

    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      width: 60%;
      margin: auto;
    }
    li{
      width: 10em;
      border: 1px solid #000;
    }
    ul li:nth-child(odd) {
      order: 0;
    }
    ul li:nth-child(even) {
      order: 2;
    }
    ul::after {
      content: '';
      display: block;
      width: 10rem;
      order: 1;
    }

  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>

=============================================================

JS

    let num = document.getElementsByTagName('li');
    let half = num.length / 2;
    let li = document.createElement('li');
    num[half].parentNode.insertBefore(li, num[half])

    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      width: 60%;
      margin: auto;
    }
    li{
      width: 10em;
      border: 1px solid #000;
    }
    li:empty{
      border: none;
    }

  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>

================================================

JQ

var li = $('ul li');
    $($('<li>')).insertBefore(li[li.length / 2])

* {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      width: 60%;
      margin: auto;
    }

    li {
      width: 10em;
      border: 1px solid #000;
    }

    li:empty {
      border: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>