Unable to get the responsive design without specifying the height(itemHeight) in Grid and child component

[ALBERT-JEGAN]

Hi, we are not able to get the responsive design while adding the data dynamically in to the box of GRID. we are not knowing the height of the box and dynamically it will change. so Can you please help me solve the issue?

const Grid = measureItems(SpringGrid);
<Grid component="div" columnWidth={257} gutterWidth={5} columns={3} gutterHeight={5} layout={layout.pinterest} duration={800} easing="ease-out" measured={true}>
                    {   
                        this.state.selectedFilter.map(function(compObj, idx){
                            return(
                                <div className="grid-item"  key={compObj.compName} style={{width: 257,height:'auto'}}>
                                    <FilterInfoBox filterObj={compObj} filterRemoveFn={_this.toggleFilter}/>
                                </div>)
                        })
                    }
</Grid>

[ALBERT-JEGAN]

I am facing the same issue as https://github.com/dantrain/react-stonecutter/issues/2. But here i m adding the content dynamically inside a FilterInfoBox component. So Can you please help me to calculate box height dynamically

[dantrain]

Hi,

The way measureItems works is by measuring the heights and caching these values in an object for performance. It's not meant to support items that constantly change their heights. If you want this feature I suggest you write your own version of the measureItems higher-order component and use that with the SpringGrid.

https://github.com/dantrain/react-stonecutter/blob/master/src/higher-order-components/measureItems.jsx

I've made another example of measuring content of unknown height, please check it out: https://github.com/dantrain/stonecutter-images-example