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 can work alongside.

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

Useful Links

914 questions
4
votes
1 answer

How to create masonry layout using css only?

I want to create masonry layout using css only, i read all tutorial in internet, but they using column property to divide layout, the problem in here is the layout will be display like this (with 1,2,3...is a items). 1|3|5 2|4|6 I want my layout…
Xuân Hiển Ngô
  • 139
  • 1
  • 10
4
votes
2 answers

Reload react-masonry-component manually

Used React Masonry Plugin for my alignment of cards https://github.com/eiriklv/react-masonry-component Problem is I have expandable component in cards which increases the height of the card and masonry layout gets distorted. Plugin realigns if…
Ankur Aggarwal
  • 2,803
  • 3
  • 27
  • 47
4
votes
1 answer

Creating a Masonry Layout using CSS?

I want to create this layout using only CSS and not jquery or javascript. Is it possible and if so, please direct me to the right source. Thanks you :) I tried my hand at this but it didn't come out…
Dinuka Jay
  • 4,233
  • 6
  • 53
  • 121
4
votes
3 answers

angularjs passy masonry - TypeError: element.masonry is not a function

I'm having this error using the passy masonry. Any idea what does it mean?Cause basically right now the masonry doesn't work for me at all. Thanks in advance
Spit It Out
  • 51
  • 1
  • 4
4
votes
2 answers

When first masonry 'item' is hidden all remaining items form into a single column

I'm trying to use Masonry for a project but i'm failry inexperienced with JS. I ran into an issue where hiding the first item in the Masonry grid caused the rest of the grid items to form into a single column. I can hide and show as many other…
John-MC
  • 41
  • 3
4
votes
3 answers

Masonry item margin-bottom issue

I've activated Masonry on the parent element (an unordered list) that houses the modified list items listed below (with Chrome's F12 DEV tools showing the margin-bottom and margin-right in the pink-ish color): When the document is loaded, the above…
Ravindu Liyanapathirana
  • 475
  • 8
  • 21
4
votes
2 answers

IE 11 doesn't render masonry js properly

Latest Update: This got fixed in the new masonry version. Original Post: I have an AngularJS website with Bootstrap3 style, which works fine in Chrome, Safari and Firefox, but not in IE (and I thought those days would be over). I use the…
peter
  • 11,751
  • 6
  • 52
  • 89
4
votes
1 answer

masonry items collapse when opening webpage for the first time

everybody! I'm working on my personal website - an on-line portfolio. This is the first website I'm writing from scratch, so I'm new to HTML, CSS, JavaScript and PHP. In fact my knowledge of JavaScript and PHP is basic, so I'm using ready-to-use…
victoria
  • 53
  • 4
3
votes
1 answer

Masonry in WordPress

Here's another attempt to get my posts into a grid: index.php The page that loads all the posts.
user13859048
3
votes
0 answers

How to use Masonry js with Rails endless pagination

Hi i am working on a ROR project with ruby 2.6.0 and Rails 5. I am using 'Masonry' to adjust my unequal height of div but its not working with endless pagination. index.html.erb
awsm sid
  • 515
  • 5
  • 19
3
votes
2 answers

How to increment a value on display of v-if?

So to explain why I need to do that : I've got a masonry of photos and I need to add an index to each of those photos. The thing is I can't relie on the index of my v-for because sometimes it is on purpose an "empty case". |---|---|---| | | 2 |…
Baldráni
  • 4,066
  • 3
  • 41
  • 63
3
votes
1 answer

Masonry layout with Next.js

I am developing a multi-page website using Next.js for the frontend and Strapi for the backend. On the blog page, the data is dynamically fetched from the database. I am trying to display this data in an adaptive layout using Masonry. The problem I…
Phil
  • 163
  • 1
  • 14
3
votes
0 answers

For react-virtualized Masonry what's the recommended way of handling deleting of items?

https://codesandbox.io/s/l79vn4rowq When deleting items, I am not reinitializing the cellMeasurerCache, as I already have the dimensions of each item. By doing so, the upper and lower bound for populating position cache is not set as the…
Chinmay Chaudhary
  • 101
  • 4
3
votes
1 answer

Masonry alternative for Angular 2+

I'm working with angular2-masonry in a project with the latest Angular version (v5.1.3) I have being looking for Masonry and other alternatives to implement in my aplication. I tried multiple ones and I didn't like the implementation. I tried doing…
Urko Pineda
  • 134
  • 1
  • 2
  • 15
3
votes
1 answer

How to Integrate Masonry + Infinite Scroll + Angular

I am trying to integrate a masonry grid with infinite scrolling in an angular 4 application. I am using for masonry the following library masonry.desandro.com and for infinite scrolling: ngx-infinite-scroll I am having issues when scrolling, the…
D.B
  • 2,955
  • 10
  • 30
  • 64
1 2
3
…
60 61