0

Typical CSS grid-layout places items in the grid left to right, then wraps to the next row, similar to using float:left on a series of block elements.

I want to display (N) items vertically then start a new column. Is this possible?

Currently, I do this with JavaScript, inserting </div><div> tags after every Nth item but was hoping for a CSS solution.

For example: Given an alphabetical list of 24 items that I want to display in 3 columns. 8 rows x 3 columns.

Items 1-8 will display in column 1, 9-16 will display in column 2 and finally, 17-24 will display in column 3.

 1 | 9  | 17

 2 | 10 | 18

 3 | 11 | 19

and so on...

 8 | 16 | 24
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Kiqkinas
  • 1
  • 1
  • 1

3 Answers3

1

Here is my solution: 

.outer-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 300px;
    flex-wrap: wrap;
}

.box-1 {
  width: 30px;
  height: 30px;
  background: yellow;
  border: 1px solid red;
}

.box-2 {
  width: 30px;
  height: 30px;
  background: orange;
  border: 1px solid red;
}
<div class="outer-1">
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-1">3</div>
  <div class="box-2">4</div>
  <div class="box-1">5</div>
  <div class="box-2">6</div>
  <div class="box-1">7</div>
  <div class="box-2">8</div>
  <div class="box-1">9</div>
  <div class="box-2">10</div>
  <div class="box-1">11</div>
  <div class="box-2">12</div>
  <div class="box-1">13</div>
  <div class="box-2">14</div>
  <div class="box-1">15</div>
  <div class="box-2">16</div>
  <div class="box-1">17</div>
  <div class="box-2">18</div>
  <div class="box-1">19</div>
  <div class="box-2">20</div>
  <div class="box-1">21</div>
  <div class="box-2">22</div>
  <div class="box-1">23</div>
  <div class="box-2">24</div>
  <div class="box-1">25</div>
  <div class="box-2">26</div>
  <div class="box-1">27</div>
  <div class="box-2">28</div>
  <div class="box-1">29</div>
  <div class="box-2">30</div>
  <div class="box-1">31</div>
  <div class="box-2">32</div>
</div>
Cuong Hoang
  • 558
  • 1
  • 3
  • 14
0

If you don't need to support IE 9 and below, you can use column-count.

ul {
  column-count: 3;
}

li {
  list-style: none;
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
  <li>K</li>
  <li>L</li>
  <li>M</li>
  <li>N</li>
  <li>O</li>
  <li>P</li>
  <li>Q</li>
  <li>R</li>
  <li>S</li>
  <li>T</li>
  <li>U</li>
  <li>V</li>
  <li>W</li>
  <li>X</li>
  <li>Y</li>
  <li>Z</li>
</ul>
Yom T.
  • 8,760
  • 2
  • 32
  • 49
0

How about grid-auto-flow: column ?

.container {
  display: grid;
  grid-template-columns: auto;
  /* max 8 rows down before spilling to next column. */
  grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px;
  grid-auto-flow: column;
}

Fill your .container with block elements... it should flow in as rows down, adding columns as necessary.

Sean Murphy
  • 516
  • 4
  • 7
  • browser conflict, mate ! – Cuong Hoang Jan 08 '19 at 03:53
  • ah right ... people still use IE. Bummer. – Sean Murphy Jan 08 '19 at 04:01
  • Its just rediculous bro. Most of them want to support IE but u know in fact no one want to touch dirty IE in practise. Some company only list IE support for hiring dev to make sure they understand things, but in reality IE is completely out of the way @Sean – Cuong Hoang Jan 08 '19 at 04:06
  • @CuongHoang Well you know what they say - during any web development, 10% of your time is spent writing beautiful code. The other 90% is spent destroying it so it will work with IE. – Sean Murphy Jan 08 '19 at 04:24