Masonry getting break at top and bottom

Question

I was trying out Masonry and Top and bottom section is getting a break (Screenshot & code attached below).

// Main container Style
#CollectionAjaxContent .new-grid.product-grid.collection-grid {
    column-count: 2;
    column-gap: .5em;
    max-width: 980px;
    margin: 0 !important;
    width: 100%;
    display: block;
}
//Inner Grid css
.grid-item {
    flex: 0 0 100%;
    align-items: stretch;
    display: flex;
    margin-bottom: 10px;
    background: radial-gradient(ellipse at center,#fff 1%,#ececec 100%);
    padding: 45px 20px 25px!important;
}

Top

Bottom

Thanks for your help