Place list items in two rows with 50% shift

Question

I am trying to place list items in two rows so that items from the bottom row are shifted 50% to the right. The order of the items also matters and should be like on the image below:

Below is the code I've come up with:

https://codepen.io/Deka87/pen/qVgjGv

ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  column-count: 3;
  column-width: 33.33%;
}
ul > li:nth-child(even) {
  transform: translateX(50%);
}

<ul>
 <li>
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
 </li>
 <li>
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
 </li>
 <li>
  3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
 </li>
 <li>
  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
 </li>
 <li>
  5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
 </li>
 <li>
  6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
 </li>
</ul>
<!-- / .timeline-list -->

As you can see, the shifted items in the bottom get "cut off" by the column. Any ideas how to fix this, or maybe any other solutions, are appreciated.

Answer 1

You can use CSS Grid layout instead

ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: grid;
  grid-template-rows: repeat(2, 1fr); /* number of rows and space taken*/
  grid-gap: 20px; /* gap between each row and column*/
  grid-auto-flow: column; /* how the grid is going to flow */

}

ul>li:nth-of-type(even) {
  transform: translateX(50%);
}

<ul>
  <li>
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
  </li>
  <li>
    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
  </li>
  <li>
    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
  </li>
  <li>
    4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
  </li>
  <li>
    5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
  </li>
  <li>
    6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, quisquam id modi nostrum! Dolor cumque neque porro. Harum qui nobis sapiente nostrum est a quas, quaerat repudiandae minima, sed vel!
  </li>
</ul>