How to flow multi-column elements from left to right before top-down in css?

Question

I am working on a html code as shown below in which I want to align multi-column elements from left-right before top-down.

<ul class="list-tomorrow-page">
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
   <li class="article-tomorrow-page"></li>
</ul>

@media (min-width: 767px) {
.list-tomorrow-page {
    column-count: 2;
    column-gap: 6rem;
}
}

@media (min-width: 767px)
.article-tomorrow-page {
    height: 475px;
    list-style: none;
    display: inline-block;
}

The above html code display the o/p in the following fashion:

item1  item5

item2  item6

item3  item7

item4

Problem Statement:

I am wondering what I should make in the css code above so that it displays the list of items in the following fashion:

item1    item2
item3    item4
item5    item6
item7

I copied the answer from here but it didn't work.

<style>
  ul {list-style: none;}
  li {float: left;}
  li:nth-child(2n+1) {clear: left;} /* 1st of every twos */
</style>

Use flexbox, set a width for each item, and allow them to wrap. — hungerstar, May 24 '19 at 14:46
@hungerstar I used flexbox but it doesn't wrap two items in a row. It wraps multiple items. — flash, May 24 '19 at 14:48
The solution you gave in the link does work https://jsfiddle.net/DIRTY_SMITH/qe925bgd/1/ — Adam Buchanan Smith, May 24 '19 at 14:48

score 1 · Accepted Answer · answered May 24 '19 at 15:06

Simple option would be to use flex with flex-wrap:

.list-tomorrow-page {
  display:flex; 
  flex-wrap:wrap;
}

.article-tomorrow-page {
  width:50%;
}

<ul class="list-tomorrow-page">
   <li class="article-tomorrow-page">1</li>
   <li class="article-tomorrow-page">2</li>
   <li class="article-tomorrow-page">3</li>
   <li class="article-tomorrow-page">4</li>
   <li class="article-tomorrow-page">5</li>
   <li class="article-tomorrow-page">6</li>
   <li class="article-tomorrow-page">7</li>
</ul>

How to flow multi-column elements from left to right before top-down in css?

1 Answers1