search

gilbitron / flexmasonry

A lightweight masonry (cascading grid layout) library powered by flexbox.
https://flexmasonry.now.sh
MIT License
429 stars 24 forks source link

gap parameter? #7

Open dimskor opened 4 years ago

dimskor commented 4 years ago

Is it possible to set gap parameter? I tried adding it with css, but it breaks the grid

tourdefran commented 3 years ago

@thedimiks Hi, did you find a solution to this? I'm trying to handle the gaps too (both vertical and horizontal) thanks in advance

mapsteps commented 3 years ago

I figured just adding padding to the inner div is doing the trick.

tourdefran commented 3 years ago

@MapSteps, thanks for the answer, not so fancy but if it works...

christianwalter commented 3 years ago

@MapSteps how did you handle the layout shift with the padding? I need to align the items vertically with my grid.

mapsteps commented 3 years ago

@christianwalter,

I added 10px of padding to the inner div and the following to the outer wrapper as - in my case - inline styles:

style="margin-left: -10px; width: calc(100% + 20px);"

Hope that helps :)

christianwalter commented 3 years ago

@MapSteps thx, that didn't work for me... Just made grid variante with adding the padding for with and max-width, quiet similar to your solution but without a negative margin.

mapsteps commented 3 years ago

Hey @christianwalter,

I just realized that I didn't add that to the outer wrapper but instead to another wrapper that's around the entire gallery. You can actually have a look at what I did here - https://portraitmode.io/.

DIntriglia commented 2 years ago

+1 for this requirement as well. Will be running through some tests on my side to see if I can implement a PR for this similar to @cinkagan's above but without the formatting.

@gilbitron Are you willing to merge if I can PR a working copy ideally with tests?

gilbitron commented 2 years ago

@DIntriglia Sure happy to merge a working PR with tests 👍

TomasBalbinder commented 1 year ago

Hello, I don't know how to create gaps anymore? I need to have them lined up. Thank you so much

briannehinchliffe commented 6 months ago

@cinkagan, @DIntriglia any update on this? This library is essentially perfect besides the lack of a gap parameter and it's sad to know that a fix essentially exists, we're just waiting on a PR.

Thanks!

DIntriglia commented 6 months ago

@briannehinchliffe I apologize. I forgot to follow up and actually forget the original reason of me using this library. I will need to look in my projects and see if I can find how I solved the issue.

DIntriglia commented 6 months ago

Just created a new PR based on #10 – This should resolve the issue while keeping the project clean.

briannehinchliffe commented 6 months ago

@DIntriglia no need to apologize! I appreciate you taking a look at this again!

briannehinchliffe commented 6 months ago

@gilbitron Would love if you had a minute to review #18 with @DIntriglia's great work! Thanks so much 😄