CSS multi-column layout prevent moving columns when height changed

Question

Trying to figure how to prevent columns from moving when we have changed height of column. Look JSFiddle, try to click links in 3 column to see: https://jsfiddle.net/g305643f/1/

If you want to offer a solution with non multi columns - this task of building columns can be realized using other methods under the following condition:

On desktop we need this:

1 3 5
2 4

On tablet:

1 4
2 5
3

Didn't find solution with flex/float/inline-blocks so made it with multi-columns and now find this issue.

$(document).ready(function() {
  $(".open").click(function(e){
    $(this).next().slideToggle();
    e.preventDefault();
  });
});

.sections {
  -webkit-column-gap:41px;
  -moz-column-gap:41px;
  column-gap:41px;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}
.section {
  -webkit-column-break-after: avoid;
  -webkit-column-break-before: avoid;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.open {
  display: block;
  text-transform: uppercase;
  margin: 10px 0;
  font-family: "Helvetica";
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sections">
  <div class="section">
    <img src="http://placehold.it/300x300" />
  </div>
  <div class="section">
    <img src="http://placehold.it/300x310" />
  </div>
  <div class="section">
    
    <a href="#" class="open">Open & raise height</a>
    <div class="hidden">
    <img src="http://placehold.it/300x320" />
    </div>
    <img src="http://placehold.it/300x330" />
  </div>
  <div class="section">
    <img src="http://placehold.it/300x340" />
  </div>
  <div class="section">
  <a href="#" class="open">Open & raise height</a>
    <div class="hidden">
    <img src="http://placehold.it/300x320" />
    </div>
    <a href="#" class="open">Open & raise height</a>
    <div class="hidden">
    <img src="http://placehold.it/300x320" />
    </div>
    <img src="http://placehold.it/300x350" />
  </div>
</div>

Are column going to change once page is loaded or is it just that number of items is unknown before loaded ? Would grid CSS do or does it need to behave like masonry js-script? — G-Cyrillus, Aug 01 '17 at 16:37

score 0 · Answer 1 · answered Aug 01 '17 at 15:34

Media Queries will nice to use in this scenario to define different style rules for different media types/devices,

In your example, you can write if device is mobile use 1 column, if device is tablet use 2 column and if device is desktop use 3 column, here is great blog from Dan Wahlin on Media Query

Something like this :

$(document).ready(function() {
  $(".open").click(function(e){
    $(this).next().slideToggle();
    e.preventDefault();
  });
});

 /*Phone*/
@media only screen and (max-width:320px)
{
  .sections {
 
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
}
  
}

 /* Tablet*/
@media  only screen and (min-width:321px) and (max-width:768px)
{
  .sections {
  -webkit-column-gap:41px;
  -moz-column-gap:41px;
  column-gap:41px;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
  
}

 /* Desktop */
@media  only screen and (min-width:769px)
{
  .sections {
  -webkit-column-gap:41px;
  -moz-column-gap:41px;
  column-gap:41px;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}
  
}

.section {
  -webkit-column-break-after: avoid;
  -webkit-column-break-before: avoid;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.open {
  display: block;
  text-transform: uppercase;
  margin: 10px 0;
  font-family: "Helvetica";
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sections">
  <div class="section">
    <img src="http://placehold.it/300x300" />
  </div>
  <div class="section">
    <img src="http://placehold.it/300x310" />
  </div>
  <div class="section">
    
    <a href="#" class="open">Open & raise height</a>
    <div class="hidden">
    <img src="http://placehold.it/300x320" />
    </div>
    <img src="http://placehold.it/300x330" />
  </div>
  <div class="section">
    <img src="http://placehold.it/300x340" />
  </div>
  <div class="section">
  <a href="#" class="open">Open & raise height</a>
    <div class="hidden">
    <img src="http://placehold.it/300x320" />
    </div>
    <a href="#" class="open">Open & raise height</a>
    <div class="hidden">
    <img src="http://placehold.it/300x320" />
    </div>
    <img src="http://placehold.it/300x350" />
  </div>
</div>

Its exactly what I use, but the problem another - our columns can dynamically change height (opening forms inside, etc) In this case we see that columns moving and collapsing when height changed — Ulad Kafk, Aug 01 '17 at 15:47
Whats expected behavior then? won't it overlap if it doen't move ? — pk_code, Aug 01 '17 at 16:01

CSS multi-column layout prevent moving columns when height changed

1 Answers1