石工-物品彼此堆叠-Vanilla JS

Question

First time I'm using Masonry.js , I try to display my items in a simple grid but all items are just in position: absolute so they stack on each other.

I try to add a margin: 0 auto on the gutter selector as advice on this post but it won't help.

Here is a fiddle, am I doing something wrong?

 let grid = document.querySelector('.main__content'), msnry = new Masonry(grid, { itemSelector: '.item', columnWidth: '.item--sizer', percentPosition: true, gutter: '.item--gutter', }); 

 .item { background: #eee; padding: 1rem; border: 1px solid darken(#eee, 5%); width: calc(50% - 2rem); &--sizer { width: calc(50% - 2rem); } &--gutter { width: 2rem; } } 

 <div class="main__content"> <div class="item">This is an item 1</div> <div class="item">This is an item 2</div> <div class="item">This is an item 3</div> <div class="item">This is an item 4</div> <div class="item">This is an item 5</div> <div class="item">This is an item 6</div> <div class="item">This is an item 7</div> <div class="item">This is an item 8</div> <div class="item">This is an item 9</div> <div class="item">This is an item 10</div> <div class="item">This is an item 11</div> <div class="item">This is an item 12</div> </div> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script> 

Thank you in advance.

AW

---

EDIT

Regarding Sabuja's answer, I fix the problem as you can see in the following jsFiddle .

 let grid = document.querySelector('.main__content'), msnry = new Masonry(grid, { itemSelector: '.item', columnWidth: '.item--sizer', percentPosition: true }); 

 *, *:before, *:after {box-sizing: border-box !important;} .item { background: #eee; padding: 1rem; border: 1px solid #ddd; width: 50%; &--sizer { width: 50%; } &--is-invisible { visibility: hidden; } } 

 <div class="main__content"> <div class="item">This is an item 1</div> <div class="item">This is an item 2</div> <div class="item">This is an item 3 with fake news : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic et amet, autem provident ab magnam cumque nihil dolorum incidunt fugiat placeat iusto libero sapiente accusantium mollitia velit, harum minima.</div> <div class="item">This is an item 4</div> <div class="item">This is an item 5</div> <div class="item">This is an item 6</div> <div class="item">This is an item 7</div> <div class="item">This is an item 3 with fake news : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic et amet, autem provident ab magnam cumque nihil dolorum incidunt fugiat placeat iusto libero sapiente accusantium mollitia velit, harum minima.</div> <div class="item">This is an item 9</div> <div class="item">This is an item 10</div> <div class="item">This is an item 11</div> <div class="item">This is an item 12</div> <div class="item item--is-invisible item--sizer"></div> <div class="item item--is-invisible item--gutter"></div> </div> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script> 

Answer 1

The script can't find required classes in DOM ("item--sizer" and 'item--gutter'). JS can't take it from CSS file.

columnWidth can't find "item--sizer" class in DOM. Add this class to the element you need. Remove line gutter: '.item--gutter' or add this element to DOM.

Answer 2

Add Css class in style

    .list-block {
        width: 100%;
        float: left;
        height: 55px;
    }       

Html code

    <div class="main__content">
        <div class="item-block">
            <div class="item">This is an item 1</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 2</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 3</div>
        </div>  
        <div class="item-block">
            <div class="item">This is an item 4</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 5</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 6</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 7</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 8</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 9</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 10</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 11</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 12</div>
        </div>
    </div>