0

I have multiple divs creating a grid pattern on my page. The width of each div is set with bootstrap to all equally be the same in this case the class 'col-md-3' is added to make each 25% of the width of the page. Each div is either 400px or 800px in height. This is where I am having a problem.

According to this question sollution 5 is what I need to do to achieve the required effect: Bootstrap row with columns of different height

I have followed the second demo however, I have no errors and I still have an offset in my Grid pattern, can someone please advise?

I have noticed that position absolute has been added to each div, his is making them layer on top of each other instead of being in the grid?

<div class="blockOut row">
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks tall">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks tall">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
</div>

.blockOut {
    margin-top: 7.5vh;
}

.blocks {
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s ease-in-out;
}

$( document ).ready(function() {
    $('.row').masonry({
      itemSelector : '.col-md-3'
   });
});
beertwenty
  • 43
  • 8

1 Answers1

0

In your code, display:none; will make everything with the .blocks class invisible. If you are working in-line with another group of blocks, it's possible you're looking at the wrong group. Some of the other CSS attributes for your .blocks class are not doing anything useful, unless this is an excerpt from a larger project.

I also see some custom CSS for the .row class in the demo which you have not included here, although you are using the class in your template. The background-clip: content-box; attribute prevents the blocks from overlapping.

.row [class*='col-'] {
  background-color: #cceeee;
  background-clip: content-box;
  min-height: 200px;
  margin-bottom: 24px;
}

Otherwise, the code you provided renders properly for me.

Ben Hulan
  • 537
  • 2
  • 7
  • Hey Ben, yea sorry the display:none is changed by javascript as an animation on load. There is also a background image which is dynamically loaded using javascript which makes more sense with regards to some other attributes.. so theoretically this should work.. however it doesn't I will look further into this and upload the answer when I fix it. Thank you. – beertwenty May 14 '19 at 08:13
  • I see. In that case I think the problem is in part of the code you did not provide. If you update the question with all the relevant code I'd be happy to take another look. – Ben Hulan May 14 '19 at 14:48