react-stack-grid overlapping fix

Grid.tsx

import React, { useEffect, useRef } from 'react'
import { useWindowSize } from '@react-hook/window-size'
import StackGrid from 'react-stack-grid'

export const Grid = ({ children }) => {
  const ANIMATION_DURATION = 400
  const [windowWidth] = useWindowSize()
  const grid = useRef(null)
  const resizeGrid = () => {
    if (grid.current) {
      setTimeout(() => {
        grid.current.updateLayout()
      }, ANIMATION_DURATION + 50) // 50 is a guess for buffer
    }
  }

  useEffect(resizeGrid, [children, windowWidth])

  return (
    <StackGrid
      gridRef={(r) => (grid.current = r)}
      columnWidth={
        windowWidth > 1440
          ? '25%'
          : windowWidth > 1200
          ? '33.33%'
          : windowWidth > 1024
          ? '50%'
          : '100%'
      }
      duration={ANIMATION_DURATION}
      gutterWidth={16}
      gutterHeight={16}
    >
      {children}
    </StackGrid>
  )
}

👍