https://i.sstatic.net/NFszG.png
I have been attempting to create a grid layout like so:
.grid {
width: 99%;
border: 1px solid #ccc;
}
.grid a, .grid .grid-sizer {
display: inline-block;
width: 20%;
padding-bottom: 20%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.grid a.wx2, .grid .grid-sizer.wx2 {
width: 45%;
}
.grid a.hx2, .grid .grid-sizer.hx2 {
padding-bottom: 66%;
}
.grid a.wx2.hx2, .grid .grid-sizer.wx2.hx2 {
padding-bottom: 33%;
}
Here is my jQuery code:
$(function () {
$('.grid').masonry({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true,
isFitWidth: true,
gutter: 10
});
});
However, the grid is not utilizing the entire available width.
Do you have any insights into what I might be overlooking?
For reference, here is a link to the jsfiddle: