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.

This sounds like something that you can solve with a flexboxwrap but the first mistake is going to be assume 33.3% actually you want t o make it 28,57 (take in acount the half element in the begining or end of the row. (100/3,5) . I'll come back on this after im done with something else. — Felipe Quirós, Dec 02 '17 at 19:32
@FelipeQuirós, thanks! Hope this solution will take into account the order of the items as well. — sdvnksv, Dec 02 '17 at 19:37

dippas · Accepted Answer · 2017-12-02T19:49:07.537

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>

Ahh, this doesn't work in Edge. Looked too good to be true :-( — sdvnksv, Dec 02 '17 at 20:26
Ended up with using flex-wrap and order properties to get the result if anybody will come across this. — sdvnksv, Dec 02 '17 at 20:42
This should be 100% compatible with latest version of EDGE https://caniuse.com/#feat=css-grid — dippas, Dec 03 '17 at 00:34

Vatsalya Prakash · Answer 2 · 2017-12-03T19:50:14.140

Since CSS grids are not universally accepted, here's a solution using Flexbox which works on all major browsers. Divide your HTML like this, it'll give you an ordered way of figuring out information.

<div class="parent">
    <div class="column">
        <div class="item">1. Lorem ipsum!</div>
        <div class="item">2. Lorem ipsum!</div>
    </div>
    <div class="column">
        <div class="item">3. Lorem ipsum!</div>
        <div class="item">4. Lorem ipsum!</div>
        </div>
    <div class="column">
        <div class="item">5. Lorem ipsum!</div>
        <div class="item">6. Lorem ipsum!</div>
    </div>
</div>

After that, use flexbox to make columns and for each item inside the column, give it 50% width (50% of its parent) and translate the even child by 100% (means 100% of its width)

.parent {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;

    .column {
        display: flex;
        flex-flow: column nowrap;
        width: 100%;

        .item {
            width: 50%;
            &:nth-child(even) {
                transform: translateX(100%);
            }
        }
    }
}

You can keep adding more items to each column without any loss in readability this way.

Sorry, but the idea was to have two rows to draw a line between them. I should have mentioned that. In your example I won't be able to do that. — sdvnksv, Dec 02 '17 at 19:58

Place list items in two rows with 50% shift

2 Answers2