CODEWITHSUNDEEP
htmlcssmasonry
chocolata
chocolata

Reputation: 3338

Uneven columns in Masonry

Quick question, struggling with Masonry. Would it be possible to have columns that are uneven? See example below:

enter image description here

The images are different in height as you can see. I'm having no problems as long as I'm using columns like 50-25-25.

My code is as follows: 

var $container = $('.masonry');
$container.imagesLoaded( function() {
    $container.masonry({
        itemSelector: '.item',
        columnWidth: '.item',
        layoutMode: 'fitRows'
    });
});

My HTML is as follows:

<div class="masonry">
    <a href="#" class="item fancybox large" ><img src="http://placehold.it/400x250"></a>
    <a href="#" class="item fancybox small" ><img src="http://placehold.it/250x250"></a>
    <a href="#" class="item fancybox medium" ><img src="http://placehold.it/350x200"></a>
    <a href="#" class="item fancybox small" ><img src="http://placehold.it/250x250"></a>
    <a href="#" class="item fancybox large" ><img src="http://placehold.it/400x250"></a>
    <a href="#" class="item fancybox medium" ><img src="http://placehold.it/350x300"></a>
</div>

My CSS is as follows:

.masonry .item img {
  width: 98%;
  padding: 1%;
  height: auto;
  max-width: 100%;
}
.masonry .item.small  {  width: 25%; }
.masonry .item.medium {  width: 35%; }
.masonry .item.large  {  width: 40%; }

My grid however keeps messing up... Like this...

enter image description here

Any clue what could be wrong? There are no console errors. I am using Isotope on a different page. I'm a little confused between Masonry and Isotope, as Isotope uses Masonry, but also has an option called MasonryHorizontal, which I don't seem to find on standalone Masonry...

Who has insights?

Upvotes: 3

Views: 2709

Answers (1)

desandro
desandro

Reputation: 2894

Yes, you can achieve this layout with Masonry. But I would recommend Packery for this kind of un-even layout. It's ideal for these kinds of layouts and it will require less code to setup. Once you set item sizes, you only need to initialize Packery.

$('.grid').packery();

See example: http://codepen.io/desandro/pen/dPzprJ

To fix your example using Masonry, you need to set columnWidth to a multiple of the item widths. Currently its just set to the width of the first item. It should be set to 5%. To set columnWidth to a percent value, use element sizing.

<div class="grid">
  <!-- grid-sizer for element sizing -->
  <div class="grid-sizer"></div>
  <div class="item large h2">40%</div>
  <div class="item small h2">25%</div>
  <div class="item medium">35%</div>
  <div class="item medium h2">35%</div>
  <div class="item small">25%</div>
  <div class="item large">40%</div>
</div>

Set .grid-sizer width in CSS.

.grid-sizer { width: 5%; }

Set .grid-sizer as columnWidth in Masonry options. Also set itemSelector.

$('.grid').masonry({
  itemSelector: '.item',
  columnWidth: '.grid-sizer'
});

See example http://codepen.io/desandro/pen/dPzpBd

What is the difference between Isotope, Masonry, and Packery?

Isotope, Masonry, and Packery are all similar in that they are layout libraries. Many of their options and methods are the same.

Masonry does cascading grid “masonry” layouts. Packery does bin-packing layouts, which allow it to be used for draggable interactions.

Isotope does sorting and filtering. Isotope uses masonry and packery layouts, as well as other layouts.

Masonry is licensed MIT and is freely available for use and distribution. Isotope and Packery have a proprietary license, where you can purchase a license for commercial projects, or use it freely for open-source projects.

Upvotes: 4

Related Questions