I am currently experimenting with creating a layout consisting of one to four variable columns per page using the Masonry plugin. I have been impressed with how it functions so far.
However, there is an aggravating gap that persists despite my best efforts to eliminate it with the available configurations.
It's worth noting that the layout is already centered on the page. However, the content within this centered block appears left-justified.
https://i.sstatic.net/esxmR.png
The inner content also does not have any margins. The Masonry plugin is initialized as follows:
$('.msgblock').masonry({
columnWidth: '.grid-item',
gutter: 8,
itemSelector: '.grid-item',
fitWidth: true,
resize: false
});
In CSS, I have removed the width property for .msgblock entirely, letting the plugin handle it.
.msgblock {
min-height: 100%;
margin: 0 auto;
z-index: 1;
}
.grid-item {
min-height: 100%;
padding-top: 10px;
}