Massoneria: rimuovere la grondaia dall'ultima colonna

Question

Ha lavorato con la nuova versione della Massoneria che sembra funzionare in modo molto più agevole, soprattutto per la configurazione fluida/reattiva che sto facendo.

Un problema che ho riscontrato, tuttavia, non sono sicuro di come rimuovere la grondaia all'estrema destra del contenitore .masonry in modo che gli elementi siano allineati al bordo.

Ecco l'esempio codepen: http://codepen.io/iamkeir/pen/xlcBj

ho potuto potenzialmente impostare una larghezza e overflow:hidden tagliare questa ultima lacuna, ma non ideale.

Allo stesso modo, ho provato ad aggiungere uno padding-left: 1% ma questo modifica la larghezza del contenitore in modo che le percentuali non siano più accurate.

Qualsiasi idea/suggerimento sarebbe molto apprezzato!

Answer 1

Puoi provare wookmark o packery per rimuovere la grondaia giusta.

Answer 2

@desandro gentilmente twittato la soluzione - la questione è stata con i miei calcoli% che avrebbe dovuto essere:

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

Così, nel mio esempio: (100% - (4 * 24%))/3) = 1.33333333333333%

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

Answer 3

ero in grado di farlo con calc(). Usando 0 margine, 0 padding, una grondaia 20px e una griglia 1200px, ecco un disegno per 1, 2, 3 e 4 colonne che sono a sinistra e a destra. Calc -10px sarebbe avvolgere, così ho dovuto usare -11px nel mio calcolo:

 #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; 
      } 
     }