CODEWITHSUNDEEP
javascriptjqueryhtmlcssmasonry
ritchieee
ritchieee

Reputation: 15

Masonry: Having issues with div layout

I am using Masonry to achieve a layout with different widths. Most have the same height, and if not, the idea is that they calculate to line up correctly next to each other.

You can view the fiddle here: http://jsfiddle.net/hLangx3g/

And here's my code:

// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
  // options
  itemSelector: '.masonry',
  columnWidth: 0
});
#masonry-grid {width:80%; margin:0 auto;}
.masonry {background:#069;}
.masonry-3 {width:25%; padding-bottom:25%; background:#0C6}
.masonry-4 {width:33.3%; padding-bottom:33.3%; background:#9C0}
.masonry-6 {width:50%; padding-bottom:50%; background:#C36}
.masonry-8 {width:66.6%; padding-bottom:33.3%; background:#FC9}
.masonry-12 {width:100%; padding-bottom:33.3%; background:#036}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="masonry-grid">
  <div class="masonry masonry-4"></div>
  <div class="masonry masonry-8"></div>
  <div class="masonry masonry-3"></div>
  <div class="masonry masonry-3"></div>
  <div class="masonry masonry-6"></div>
  <div class="masonry masonry-3"></div>
  <div class="masonry masonry-3"></div>
  <div class="masonry masonry-12"></div>
  <div class="masonry masonry-12"></div>
</div>

(The code inserted on Stack Overflow doesn't seem to layout correctly, my jsfiddle is where I'm at so far).

You'll see there are four green (not the lime one) squares of the same width and height. I was hoping that the four boxes would themselves sit in a square, so two on each line, with the big pink box sat to the right of the four. That would then all equal out.

How can I get the four green squares to sit 2x2 with the pink square to the right? I've been racking my brains for hours trying to figure out what I'm doing wrong.

Thanks in advance.

Upvotes: 1

Views: 1034

Answers (2)

Ford
Ford

Reputation: 2597

You need to have a non-zero columnWidth. What's happening is that Masonry is looking for that variable and being 0, is using the width of the first element it finds that matches the itemSelector (your masonry-4 object). You need to set it (setting it to 1 is the best for what you're attempting to do with different widths).

JSFiddle: http://jsfiddle.net/hLangx3g/1/

Upvotes: 2

OxyDesign
OxyDesign

Reputation: 754

If I understood, this is what you want, right ?

http://jsfiddle.net/OxyDesign/4n73om6z/

I added :

HTML : <div class="column"></div>

CSS : .column{width:8.3333333333%;}

I changed :

JS : columnWidth: '.column'

Upvotes: 0

Related Questions