-1

Essentially what I want to do is to have this kind of layout:

"item-1" "item-5"

"item-2" "item-6"

"item-3" "item-7"

"item-4"

Please notice that items go from top to bottom and not from left to right.

EDIT: It is unknown how many items are in the list

karolis2017
  • 2,195
  • 8
  • 24
  • 49

3 Answers3

2

Try CSS Multi-column Layout

.column {
  -webkit-column-count: 2; 
  -webkit-column-gap: 40px;
  -moz-column-count: 2;
  -moz-column-gap: 40px;
  column-count: 2;
  column-gap: 40px;
}
<div class="column">
  <p>item-1</p>
  <p>item-2</p>
  <p>item-3</p>
  <p>item-4</p>
  <p>item-5</p>
  <p>item-6</p>
  <p>item-7</p>
</div>
Pons Purushothaman
  • 2,225
  • 1
  • 14
  • 23
  • this seems to be working. The issue I have now is that if I have a multiline text the half of it gets cut and appear on the 2nd column. How can I make sure that it doesn't get cut? Does this make sense? – karolis2017 Jul 09 '19 at 06:18
0

Here is the link, as it says in the picture, you can choose, how the grid apears for you by rearranging items. https://www.w3schools.com/css/css_grid_item.asp

W3school Grid

Sirmais
  • 118
  • 13
-1

If you know about div and inline-block, try making two divisions under a main div and give the display: inline-block property. In this way you can easily set the margin and dimensions according to your need. This should solve your problem.

DesmondSam
  • 1
  • 1