Stack Overflow
Stack Overflow

Questions tagged [masonry]

Masonry, formally jQuery Masonry, is a JavaScript cascading grid layout library.

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

As of version 3, Masonry does not depend on jQuery anymore, but it can work alongside.

Created by David DeSandro, Masonry is released under the permissive MIT License.

Useful links

950 questions
24
votes
2 answers

Horizontal masonry layout with flexbox CSS only

I'm trying to create a horizontal masonry layout using only CSS and flexbox. The problem I'm having is there are vertical gaps between the elements, without using align-left: stretch; is it possible to close the gaps? .card-container { display:…
Julian
  • 1,007
  • 1
  • 13
  • 23
13
votes
2 answers

Centering elements in isotope

Hello everyone and I hope you're doing well. I am using Isotope and below you can see the JavaScript that I have written. I find it impossible to center li elements if they are the Isotope elements. To see what I mean by centering, please see the…
justme
  • 517
  • 1
  • 3
  • 18
12
votes
2 answers

Javascript callback after instagram embeds have loaded?

I'm attempting to tile multiple Instagram embeds with Masonry. Problem is the instagram embeds change sizes after loading so the layout leaves gaps. Is there a callback that i can use when all instagram embeds on the page have loaded? I'm thinking i…
George Ananda Eman
  • 3,292
  • 8
  • 28
  • 29
12
votes
3 answers

Window orientationchange event in Angular

Is there a way to call the orientationchange event inside an AngularJS directive? I'm currently working with angular-masonry and I'm trying to update/refresh masonry when the orientation of the mobile device changes. I've found this but I'm…
tdhulster
  • 1,531
  • 3
  • 18
  • 32
10
votes
4 answers

Masonry - Column width percent + gutter

Why can't I show 4 items by row if the width of each one is 25% and the gutter param is 10? Please help me! $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', gutter:…
Dave Lin
  • 113
  • 1
  • 1
  • 5
9
votes
2 answers

CSS grid: how to bring elements in same grid area to line up?

My target is to use CSS grid layout for a two-column masonry layout of boxes. Given an element with children:
bring the children to sort…
Boldewyn
  • 81,211
  • 44
  • 156
  • 212
9
votes
2 answers

Masonry Grid Continuous Loop Scroll

So I'm trying to achieve a continuous loop effect on a page that contains a masonry grid. Basically I have a full page masonry grid that I want to loop on scroll up or down. Currently I have this: var $grid = $('.grid').masonry({ itemSelector:…
Corey
  • 2,453
  • 4
  • 35
  • 63
9
votes
5 answers

How to create the masonry effects with just bootstrap 3 grid system and css

My issue is that i want to display data in a block format using the bootstrap 3 grid system however i dont want the annoying whitespace gaps that happen from the height being constrained to the above row. For example, If i do:
…
Typhomism
  • 284
  • 1
  • 3
  • 13
7
votes
4 answers

Best way to manage images for a masonry grid in a CMS?

I have a masonry grid using masonry/packery js plugin in a CMS and it is very cumbersome for the users to manage the images because they need to be exact ratios to get the proper brick effect and fill all the gaps which is a big pain for the non…
zanedev
  • 558
  • 5
  • 16
7
votes
1 answer

Masonry with full-width items

I am having an issue with Masonry where if I need one element to be 100% width and the rest to be 50% width, the layout no longer puts my elements adjacent to each other. What I would like is for the items to show up side-by-side like they do when…
Andres
  • 2,013
  • 6
  • 42
  • 67
7
votes
2 answers

jquery help - initialize Masonry after all images have loaded

I am using a masonry plugin but my images are overlapping when the page first loads. If I change the width of the browser they fall into place. The developer told me to do the following but I am unsure how to "add it: to my custom.js file…
Peter Eastwood
  • 225
  • 2
  • 4
  • 10
7
votes
2 answers

Masonry/Pinterest columns using React Native

Is there some way to use flexbox in React Native to achieve a Masonry / Pinterest style columns?
midudev
  • 1,059
  • 15
  • 27
7
votes
9 answers

Responsive Masonry layout without predefined widths

I'm creating a 2 column masonry layout using images of different sizes. The images can be any size as long as they have the greatest common divisor (as required by the Masonry plugin). In order to make the layout responsive I'm converting the width…
CyberJunkie
  • 21,596
  • 59
  • 148
  • 215
7
votes
1 answer

Cannot get Masonry-Rails Gem to work in my app

so I have scoured stackoverflow and found some similar articles but nothing has worked for me yet. I am creating a rails app and I want to use the Masonry for my layout. I have tried uploading the js as described in this post, but I could not get it…
tommy-taco
  • 227
  • 1
  • 8
6
votes
1 answer

Is it possible to arrange Shiny app cards in a masonry grid?

I am currently trying to create a "wall" of cards from a dataframe for a hobby Shiny app. Adapting from this SO answer, here is a minimal complete example of my code: library(shiny) df <-…
DMNO
  • 63
  • 5
1
2 3
…
63 64