Freemasonry with full width objects

Question

I have a problem with Freemasonry, where if I need one element to be 100% wide and the rest to be 50% wide, the layout no longer puts my elements next to each other. I would like the elements to be displayed side by side, as they do when there is no 100% -width element.

Here's the js fiddle: https://jsfiddle.net/ubmf47s4/2/

<div id="boxes" class="masonry clearfix"> <div class="box box-fw" style="background: cyan;"> <div class="inner"> <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> </div> </div> <div class="box" style="background: magenta;"> <div class="inner"> <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> </div> </div> <div class="box" style="background: yellow;"> <div class="inner"> <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> </div> </div> <div class="box" style="background: grey;"> <div class="inner"> <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> </div> </div> </div> .box{ width: 50%; box-sizing:border-box; } .box-fw{ width:100% } $(function(){ var container = $('#boxes'); container.imagesLoaded(function(){ //console.log( "Images loaded!" ); container.masonry({ itemSelector: '.box', isAnimated: true }); }); }); 

Answer 1

Freemasonry requires columnWidth determine the width of the columns so that it can accommodate your content, which can be either a direct pixel value or a selector to measure an element. Since columnWidth not specified in your code, Masonry by default measures the first element in your masonry container to set the column width. Since your first element is 100% wide, Freemasonry measures it and sets the column width to 100%, so your 50% elements no longer appear side by side (the entire layout of the masonry is actually one column).

More on this in the Freemasonry docs for columnWidth .

---

One way to fix this is to specify an element that Freemasonry can measure to set the width of the column. In this case, I used an element with the column-sizer , which I rated at 50% using CSS. Freemasonry then measures this element to determine the size of the column for the layout. I borrowed a technique from the David Desandro fluid columnWidth CodePen example .

Screenshot of the result:

Real-time working demo:

 $(function() { var container = $('#boxes'); container.imagesLoaded(function() { //console.log( "Images loaded!" ); container.masonry({ itemSelector: '.box', columnWidth: '.column-sizer', isAnimated: true }); }); }); 

 html, body { margin: 0; } .box, .column-sizer { width: 50%; box-sizing: border-box; } .box-fw { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://npmcdn.com/ masonry-layout@4.0.0 /dist/masonry.pkgd.min.js"></script> <script src="https://npmcdn.com/ imagesloaded@4.1.0 /imagesloaded.pkgd.min.js"></script> <div id="boxes" class="masonry clearfix"> <div class="column-sizer"></div> <div class="box box-fw" style="background: cyan;"> <div class="inner"> <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> </div> </div> <div class="box" style="background: magenta;"> <div class="inner"> <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> </div> </div> <div class="box" style="background: yellow;"> <div class="inner"> <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> </div> </div> <div class="box" style="background: grey;"> <div class="inner"> <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> </div> </div> </div> 

JSFiddle Version: https://jsfiddle.net/x9mf2c6x/