Put elements in rows first, then columns

Question

I'm trying to put some html elements (images) in columns and, depending on the resolution, it would be 1, 2, 3 or 4 columns. For example, if I had 11 images, I would like to put them in this way (3 columns in this case):

1    2    3
4    5    6
7    8    9
10   11

I've got a code that creates the columns depending on the resolution of the screen, but it puts the columns like this:

1    5    9   
2    6    10
3    7    11
4    8

Could you help me?

#pics {
  line-height: 1;
  -webkit-column-count: 4;
  -webkit-column-gap:   10px;
  -moz-column-count:    4;
  -moz-column-gap:      10px;
  column-count:         4;
  column-gap:           10px;
}
#pics img {
  width: 100% !important;
  height: auto !important;
}
@media (max-width: 800px) {
  #pics {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 500px) {
  #pics {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 300px) {
  #pics {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}

<section id="pics">
   <img src="http://placehold.it/240x240?text=01" alt="01" width="240">
   <img src="http://placehold.it/240x240?text=02" alt="02" width="240">
   <img src="http://placehold.it/240x240?text=03" alt="03" width="240">
   <img src="http://placehold.it/240x240?text=04" alt="04" width="240">
   <img src="http://placehold.it/240x240?text=05" alt="05" width="240">
   <img src="http://placehold.it/240x240?text=06" alt="06" width="240">
   <img src="http://placehold.it/240x240?text=07" alt="07" width="240">
   <img src="http://placehold.it/240x240?text=08" alt="08" width="240">
   <img src="http://placehold.it/240x240?text=09" alt="09" width="240">
   <img src="http://placehold.it/240x240?text=10" alt="10" width="240">
   <img src="http://placehold.it/240x240?text=11" alt="11" width="240">
</section>

score 1 · Answer 1 · answered Mar 06 '17 at 19:40

1

.wrapper {
column-count:3;
}
.col {
  width:33%;
  height:50px;
}

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
</div>

answered Mar 06 '17 at 19:40

Brad

8,044
10
39
50

That's what I've got and what I don't want :( Thanks for reply! – Ommadawn Mar 06 '17 at 20:05
apologies, I misread the question. To be honest, your best bet is flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Brad Mar 06 '17 at 20:23

StephanieQ · Accepted Answer · 2017-03-08T17:01:05.877

CSS columns are intended to display (as columns are) vertically.

You need to either use floats or flexbox.

Read more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

*,
*::before,
*::after {
  box-sizing: border-box;
}

#pics {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-justify-content: flex-start; /* Safari */
  justify-content:   flex-start;
}
#pics div {
  width: 100%; 
  padding: 5px;
}

#pics div img{
  width: 100%; 
  height: auto; 
}


@media (min-width: 250px) {
  #pics div { width: 49%; }
}

@media (min-width: 500px) {
  #pics div { width: 32%; }
}

<section id="pics">
    <div><img src="http://placehold.it/240x240?text=01" alt="01" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=02" alt="02" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=03" alt="03" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=04" alt="04" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=05" alt="05" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=06" alt="06" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=07" alt="07" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=08" alt="08" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=09" alt="09" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=10" alt="10" width="240"></div>
    <div><img src="http://placehold.it/240x240?text=11" alt="11" width="240"></div>
</section>

I thought it was going to work, but it didn't :( Maybe anything more is missed? — Ommadawn, Mar 06 '17 at 20:29
have you seen? You've got: 1,5,9 in the first row. I want 1,2,3! — Ommadawn, Mar 06 '17 at 20:45

score 0 · Answer 3 · edited May 23 '17 at 11:46

0

Read thorough this answer. It's also responsive

You are going to make a masonry layout.

Another quick alternative for you is to go with Twitter bootstrap.

I think you'd better go with either of solutions above, Try to avoid struggling with setting/aligning divs & ...

edited May 23 '17 at 11:46

Community

1
1

answered Mar 06 '17 at 19:45

behkod

2,647
2
18
33

This is the way that I don't want. I want to fill the columns row by row (hozirontally), not column by column (vertically) – Ommadawn Mar 06 '17 at 20:20

Put elements in rows first, then columns

3 Answers3