CODEWITHSUNDEEP
htmlcssmultiple-columns
flash
flash

Reputation: 1519

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

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>

Upvotes: 0

Views: 188

Answers (1)

Pete
Pete

Reputation: 58442

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>

Upvotes: 1

Related Questions