设置元素填充时砌体不起作用

Question

例如，当我将 grid-item 的 padding 设置为 8px（并调整宽度）时，即使元素的宽度小于页面的 40%，它们也会堆叠在一列中。

html

<div class="grid">
    <div class="grid-sizer"></div>
    <div class="grid-item"><span>1<br>blalbalblablablblab</span></div>
    <div class="grid-item"><span>2<br>blablabla blablalab blalbalb blalbalb</span></div>
    <div class="grid-item"><span>3<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores ducimus numquam, ullam natus dolores nulla veritatis optio voluptates cumque nostrum, assumenda est culpa, non placeat modi, necessitatibus illum. Consectetur, amet?</span></div>
    <div class="grid-item"><span>4<br>dsnfkjsanfkjsd sdjfnksdjn kasd<jnf</span></div>
    <div class="grid-item"><span>5<br>sadasdas</span></div>
    <div class="grid-item"><span>6<br>sadasdas</span></div>
    <div class="grid-item"><span>7<br>sadasdas</span></div>
    <div class="grid-item"><span>8<br>sadasdas</span></div>
    <div class="grid-item"><span>9<br>sadasdas</span></div>
</div>

css

    .grid {
        padding: 0;
        padding-left: 3px;
        width: 100%;
        margin: 0 auto;
    } 
    .grid-sizer,
      .grid-item { width: calc(50% - 8px); }
      .grid-item { background: #0A53D9; color: white; 
         border-radius: 2px; padding: 0px; margin-bottom: 4px; 
      }

js

var elem = document.querySelector('.grid');
    var iso = new Isotope(elem, {
        // options
        itemSelector: '.grid-item',
        percentPosition: true,
        // name: '.name',
        masonry: {
            columnWidth: '.grid-sizer',
            gutter: 8
            // isFitWidth: true
        }
        // ,
        // getSortData: {
        //     number: '.number',
        // },
        // sortBy: 'number',
        // sortAscending: true
    });

Answer 1

您是否尝试过在 .grid-item 元素上使用 box-sizing 以便填充不会影响宽度，而不是添加 gutter:

.grid-item{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

设置元素填充时砌体不起作用

Masonry not working when set elements padding

html

javascript

css

masonry