Question

Is it possible to specify a masonry columnWidth in em units, rather than pixels?

$(function(){
  $('#container').masonry({
    itemSelector : '.item',
    columnWidth : '20em',

My goal is to create a layout that is robust when used with Firefox ‘zoom text only’. And in general I don’t use pixel units anywhere else… everything on this site is em units.

When I try the above columnWidth all the divs stack on top of each other, as if the columnWidth were zero.

An answer for vanilla masonry would also meet the desire.

Answer 1

Yes, @desandro has provided a probable way forward at https://github.com/desandro/masonry/issues/227, by leaving things in pixels but calculating the width of an em. It needs some tweaks but could be made to work:

  var $container = $('#container');
  var em = parseFloat( $container.css('font-size') );
  $container.masonry({
    columnWidth: 10 * em
  });