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

Question

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

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

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

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

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

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

Я способный сделать это с помощью calc(). Используя 0 margin, 0 padding, 20px gutter и сетку 1200px, вот конструкция для 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; 
      } 
     }