Failed to render responsive grid correctly when the width is not 100%.

[Joseph Chiang]

Just realised that you use enquire.js which sets the media queries to achieve the responsive view. This works fine when the grid occupies 100% in width. However, when the page comes with a side navigation, the grid will be wider than it's parent container.

Do you have any workaround for this? Or I have to write my own makeResponsive HoC?

[Dan Train]

Yes that's right that's how it currently works. You can write your own HoC to set the columns prop. I'm open to suggestions for a more generic makeResponsive HoC to include.

[Matthew-Herman1]

I used a use effect and ref to the responsive container to set the number of columns dynamically, and it only needs to rerender when the number of columns changes.

const COL_WIDTH = 275;

useEffect(() => {
    if (cardsContainerRef.current) {
      let cardsContainerWidth = parseInt(window.getComputedStyle(cardsContainerRef.current).width.replace("px", "") ,10);
      let numCols = Math.floor(cardsContainerWidth / COL_WIDTH);
      if (cardsContainerNumCol !== numCols) {
        setCardsContainerNumCol(numCols);
      }
    }
});

<div ref={cardsContainerRef}>
    <SpringGrid
        component="div"
        columns={cardsContainerNumCol}
        columnWidth={COL_WIDTH}
        gutterWidth={12}
        gutterHeight={12}
        itemHeight={380}
        springConfig={{ stiffness: 90, damping: 20 }}
    >{...ListItems}</SpringGrid>
</div>