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
4
votes
0 answers

Centered masonry layout with percentage widths

I am trying to implement masonry to my website. What I am aiming for is for a grid which is centered in the page. This is easy just by applying a margin:0 auto; property. I then want the items inside to be both responsive (so a percentage width)…
Daniel AG
  • 183
  • 8
4
votes
1 answer

Bootstrap grid with collapsed container in between

It's my very first question here and i hope you can help me. I'm trying to set up a product-overview page with the bootstrap grid. I have got 4 products in a row for large screen sizes. For smaller screen sizes i'd like to have 2 products per…
Thomas B.
  • 41
  • 1
  • 4
4
votes
2 answers

Masonry grid using flexbox

I need a masonry grid like this: Is this possibile to achieve that using flexbox only? Or any other way? Don't want to use Masonry library or other library or framework.
Kaysh
  • 83
  • 1
  • 7
4
votes
1 answer

How to insert each image of gallery in certain div? Wordpress

I'm trying to reproduce this Masonry to show a gallery. I created a CPT for this. "CPT - Gallery". First, I thought of creating a Custom Post Type to publish all images together. MY CPT: --->>> title <<<--- --->>> image default - thumbnail <<<---…
Zkk
  • 741
  • 13
  • 29
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,993
  • 5
  • 30
  • 56
4
votes
0 answers

Masonry Gutter-Sizer Breaks Page

Check this issue out on https://willhay.io/photography. So I am trying to have a margin-botttom of 1%, and a gutter of 1%. The margin-bottom works fine, but when I try to set the gutter to 1%, the images seem to disappear and only 2 images show up…
Darkstar
  • 725
  • 2
  • 8
  • 27
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…
Jay
  • 4,873
  • 7
  • 72
  • 137
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
3 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…
ravindUwU
  • 657
  • 11
  • 26
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
  • 14,348
  • 9
  • 62
  • 96
4
votes
1 answer

jQuery Isotopewrapper: possible to resize all isotopeItems to same height (per row)?

I have a website that is using jquery's isotope wrapper with html code like this:
3
votes
3 answers

How to render the item horizontally (Masonry Layout )?

I would like to render the items horizontally while the page load, refer to following images
…
James Wong
  • 155
  • 2
  • 14
3
votes
2 answers

Material-UI Masonry: Remove space on right side

Using Material-UI, the width of the Masonry Component doesn't fill the width of the parent container. The width of this missing space is exactly the width of the spacing, which makes sense if there's an element next to it. I tried to calculate the…
Alexander Schoch
  • 255
  • 2
  • 11
1 2
3
…
63 64