CODEWITHSUNDEEP
htmlcsscss-multicolumn-layout
Ommadawn
Ommadawn

Reputation: 2730

Put elements in rows first, then columns

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>

Upvotes: 0

Views: 1194

Answers (3)

StephanieQ
StephanieQ

Reputation: 882

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>

Upvotes: 1

behkod
behkod

Reputation: 2777

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 & ...

Upvotes: 0

Brad
Brad

Reputation: 8698

.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>

Upvotes: 1

Related Questions