Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout bug at the bottom #26

Open
Steffi3rd opened this issue Jan 7, 2021 · 14 comments
Open

Layout bug at the bottom #26

Steffi3rd opened this issue Jan 7, 2021 · 14 comments

Comments

@Steffi3rd
Copy link

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/)


Capture d’écran 2021-01-07 à 10 53 22

@ghost
Copy link

ghost commented Mar 29, 2021

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

@ghost
Copy link

ghost commented Apr 1, 2021

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

@animemoeus
Copy link

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/)

Capture d’écran 2021-01-07 à 10 53 22

same problem

@ghost
Copy link

ghost commented May 20, 2021

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/)
Capture d’écran 2021-01-07 à 10 53 22

same problem

See my comment above for the fix

@animemoeus
Copy link

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

do you mean each child inside Masonry?

still not working for me

@ghost
Copy link

ghost commented May 20, 2021

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
Copy link

I have this kind of bug here

image

@MartaGalve
Copy link

Also experiencing this issue.

@animemoeus
Copy link

animemoeus commented Oct 22, 2021

Also experiencing this issue.

SOLVED 🚀

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

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

@MartaGalve
Copy link

MartaGalve commented Oct 22, 2021

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
Copy link

I am still facing this problem, please patch this asps

@Amit-Dagar
Copy link

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
Copy link

I also have this problem :/

@reinvanimschoot
Copy link

This still seems to be an issue. Are there any updates or workarounds? Or is there an alternative package that does not have this problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants