Кирпичная кладка: удалить желоб из последней колонны

Question

Работал с новой версией Masonry, которая, кажется, работает намного плавнее, особенно для гибкой / отзывчивой сборки, которую я делаю.

Однако я столкнулся с одной проблемой - я не уверен, как убрать водосточный желоб в дальнем правом углу контейнера.masonry, чтобы предметы находились на одном уровне с краем.

Вот пример codepen: http://codepen.io/iamkeir/pen/xlcBj

Я мог бы потенциально установить ширину и overflow:hidden обрезать этот последний пробел, но не идеально.

Точно так же я попытался добавить padding-left: 1% но это меняет ширину контейнера, поэтому проценты уже не точны.

Любые идеи / советы будут с благодарностью!

Answer 1

@desandro любезно написал в Твиттере решение - проблема была с моими вычислениями%, которые должны были быть:

(container width - (columns * column width)) / number of gutters = gutter width

Итак, в моем примере: (100% - (4 * 24%)) / 3) = 1.33333333333333%

http://codepen.io/desandro/pen/ybluC

Answer 2

Я был в состоянии сделать это с помощью calc(). Используя поля 0, отступы 0, водосточный желоб 20 пикселей и сетку 1200 пикселей, приведем схему для 1, 2, 3 и 4 столбцов, которые располагаются заподлицо слева и справа. Calc -10px будет переноситься, поэтому мне пришлось использовать -11px в моих вычислениях:

        #grid .item {
            float: left;
            padding: 0;
            width: 100%;
            margin: 0;
        }

        @media only screen and (min-width: 500px) {
            #grid .item {
                width: calc(50% - 11px);
            }
        }

        @media only screen and (min-width: 800px) {
            #grid .item {
                width: calc(33% - 11px);
            }
        }

        @media only screen and (min-width: 1200px) {
            #grid .item {
                width: 285px;
            }
        }

Answer 3

Вы можете попробовать wookmark или упаковку, чтобы удалить правый желоб.