Fit to parent

[kaipradel]

I am wondering if its possible to make the grid fit to the width of the parent, instead of defining a maxWidth via makeResponsive.

I am using the SprintGrid to render items within a parent div. It seem as though the component always has a fixed width that I can't control unless I specify the full width on init.

Any ideas? Kai

[dantrain]

Hi there,

makeResponsive only works well if your grid spans the page. If you don't use it then you have control over 3 things that affect the width: columns, columnWidth and gutterWidth. So for example for columns={3} columnWidth={100} gutterWidth={10} the width will be 100 + 10 + 100 + 10 + 100 = 320px. So if you know the width of the parent you should be able to work backwards.

Perhaps this isn't the clearest API but I'm not sure if specifying the grid width rather than the column width would be clearer, any thoughts?

[newsiberian]

Hi, I'm using react-sizeme to have element query. So with it my makeResponsive render now looks like:

render() {
      const { columnWidth, gutterWidth, size } = this.props;
      let columns;
      let minPadding = 112;
// some computation here...
      columns = Math.floor((size.width - minPadding) / (columnWidth + gutterWidth));
      return <Grid {...this.props} {...this.state} columns={columns} />;
    }

where size.width is parent width.

[kaipradel]

This worked perfectly. Thanks for the quick response.