Layout bug at the bottom

[Steffi3rd]

Hello,

Thank you for the package, it's very easy to use it.

I just noticed that at the bottom, it's not render as excepted. There is space to allow the last block to move in the other column but it's not the case.

Someone know how to fix that please ?

(I found that the demo that the behavior is the same: https://cedricdelpoux.github.io/react-responsive-masonry/)

[

](url)

[ghost]

Experiencing the same issue and couldn't find a fix yet. Would be ace, if someone has a idea...

[ghost]

Adding vertical-align: bottom at each image worked for me.

[animemoeus]

Hello,

Thank you for the package, it's very easy to use it.

I just noticed that at the bottom, it's not render as excepted. There is space to allow the last block to move in the other column but it's not the case.

Someone know how to fix that please ?

(I found that the demo that the behavior is the same: https://cedricdelpoux.github.io/react-responsive-masonry/)

same problem

[ghost]

Hello, Thank you for the package, it's very easy to use it. I just noticed that at the bottom, it's not render as excepted. There is space to allow the last block to move in the other column but it's not the case. Someone know how to fix that please ? (I found that the demo that the behavior is the same: https://cedricdelpoux.github.io/react-responsive-masonry/)

same problem

See my comment above for the fix

[animemoeus]

Adding vertical-align: bottom at each image worked for me.

do you mean each child inside Masonry?

still not working for me

[ghost]

Yes, vertical-align: bottom on each child.

This is my code, maybe it helps.

Masonry Gallery Component:

import React from "react"
import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"
import { rhythm } from "../../utils/typography"

export default function MasonryGallery({ children }) {
  return (
    <ResponsiveMasonry columnsCountBreakPoints={{ 991: 1, 992: 2 }}>
      <Masonry gutter={rhythm(2)}>{children}</Masonry>
    </ResponsiveMasonry>
  )
}

The gallery where I use it:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { Link } from "gatsby"
import styled from "styled-components"
import MasonryGallery from "../components/layouts/masonry-gallery"
import SectionLayout from "./layouts/section-layout"
import { rhythm } from "../utils/typography"

const StyledLink = styled(Link)`
  .image {
    vertical-align: bottom;
  }

  .text {
    margin-top: ${rhythm(1 / 2)};
  }
`

export default function Gallery() {
  const data = useStaticQuery(graphql`
    query GalleryQuery {
      allContentfulProjects(sort: { fields: orderNumber, order: DESC }) {
        nodes {
          id
          title
          image {
            gatsbyImageData(
              layout: CONSTRAINED
              placeholder: BLURRED
              formats: [AUTO, WEBP]
              quality: 100
              width: 1500
            )
            description
          }
          slug
        }
      }
    }
  `)
  return (
    <SectionLayout>
      <MasonryGallery>
        {data.allContentfulProjects.nodes.map(gallery => {
          const images = getImage(gallery.image)
          return (
            <StyledLink to={gallery.slug}>
              <GatsbyImage
                className="image"
                key={gallery.id}
                image={images}
                alt={gallery.image.description}
              />
              <div className="text">{gallery.title}</div>
            </StyledLink>
          )
        })}
      </MasonryGallery>
    </SectionLayout>
  )
}

[MohdAhmad1]

I have this kind of bug here

[MartaGalve]

Also experiencing this issue.

[animemoeus]

Also experiencing this issue.

SOLVED 🚀

https://www.npmjs.com/package/react-masonry-css

https://github.com/animemoeus/waifu-animemoeus

[MartaGalve]

Looking at the code it looks like it simply places the children as they are found in the defined columns, it does not take into consideration the height of each child. First child goes into 1st column, 2nd into 2nd column etc. and that's it. It works fine if all elemens thave the same (or similar) height but if they don't it looks bad. To work around it I'm just making sure I pass the elements in the order I need so they are placed in the columns I want, but of course this could work for a breakpoints and not for another one. Not sure if any other masonry libs out there sort the items based on their height, it looks like react-masonry-css doesn't do it either as they say it kills performance.

[Darpan-favfly]

I am still facing this problem, please patch this asps

[Amit-Dagar]

you guys can use react-stack-grid it works good but in my case it sometimes not rendering very few elements that's why I have to consider other options otherwise react-stack-grid is good library but its very old libary.

[celsoalmeida]

I also have this problem :/