You guys are doing it completely wrong.
Firstly, MASONRY is a library for stacking elements of differing sizes. If you are looking for things to be exact sizes, you should disable the Masonry Grid function in the XenPorta style properties. At that point, styling the grid is up to you, as XenPorta will no longer do it automatically.
This is the CSS I recommend using... and DO NOT put it in existing templates. You should NEVER edit existing templates when you want to modify your styles and skins. You should be doing your changes in
extra.less
or the template modification system.
CSS:
@_xp2_body_height: 200px;
@_xp2_head_height: 41px;
@_xp2_columns: 3;
.block[data-masonry=""]
{
margin: 0 ~"calc(-@{xf-sidebarSpacer} / 2)";
.porta-article-item
{
display: inline-block;
width: ~"calc(100% / @{_xp2_columns})";
.porta-article-container
{
margin: 0 ~"calc(@xf-sidebarSpacer / 2)";
}
.message-main
{
display: flow-root;
.message-body { height: @_xp2_body_height; overflow: hidden; }
}
.block-header + .message-inner
{
.message-main .message-body { height: ~"calc(@{_xp2_body_height} - @{_xp2_head_height} + @xf-EWRporta_header_height)"; }
}
}
}
I put 3 easy to edit variables on top.
_xp2_body_height
defines how big you want the text area to be when you are using image headers. If you promote a post that does not have an image header, it will add the value of
xf-EWRporta_header_height
to this height, so that things stay equal. There is also a variable for
_xp2_head_height
. This will be different for all your skins and is simply an offset for the previously mentioned circumstance. It should be equal to the calculated height of text headers (not image headers).
And the third is the number of columns you want.