search

desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.38k stars 2.11k forks source link

how i can add gutter on my work #1093

Closed TasioC closed 5 years ago

TasioC commented 5 years ago

i have my grid right when i put 0% on my .masonry-gutter-sizer, but when i add gutter doesn't work and goes down. i dont know what i need to change.

Thanks for the help is a really good plugin. :)

https://codepen.io/ta_io/pen/KEbQxo

desandro commented 5 years ago

If your gutter is 3% you need to account for that gutter space in your columnWidth spacing. A grid with 4 columns and 3 gutters of 3% would be:

( 100% - ( 3 * 3%) ) / 4 = 22.75%

Your grid sizes would then be:

.x1 { width: 22.75% }
.x2 { width: 48.5%; } /* 22.75 * 2 + 3% */
.x3 { width: 74.25%; } /* 22.75 * 3 + 3% * 2 */
.x4 { width: 100%; }
TasioC commented 5 years ago

hi ! first thanks for all, but when i put all this grid sizes and 3% on my gutter i have not gutter bottom, i need add padding-bottom to my columnWidth? this is what i have.

https://codepen.io/ta_io/pen/KEbQxo