Useful Grid algorithm from Material-UI

React Fast Grid.Useful algorithm extracted from Material-UI Grid.

# React < 16
npm install react-fast-grid [email protected]^8.6.1 --save

# React 16+
npm install react-fast-grid react-jss --save

Known Issues

direction: column | column-reverse

Though the Grid component has a direction property that allows values of row, row-reverse, column, and column-reverse, there are some features that are not supported within column and column-reverse containers. The properties which define the number of grids the component will use for a given breakpoint (xs, sm, md, lg, and xl) are focused on controlling width and do not have similar effects on height within column and column-reverse containers. If used within column or column-reverse containers, these properties may have undesirable effects on the width of the Grid elements.

Negative margin

There is one limitation with the negative margin we use to implement the spacing between items.
A horizontal scroll will appear if a negative margin goes beyond the <body>.
There are 3 available workarounds:

Not using the spacing feature and implementing it in user space spacing={0} (default).
Applying padding to the parent with at least half the spacing value applied to the child:

<body>
  <div style={{ padding: 20 }}>
    <Grid container spacing={5}>
      //...
    </Grid>
  </div>
</body>

Adding overflow-x: hidden; to the parent.

white-space: nowrap;

The initial setting on flex items is min-width: auto.
It’s causing a positioning conflict when the children is using white-space: nowrap;.
You can experience the issue with:

<Grid item xs>
  <Typography noWrap>

In order for the item to stay within the container you need to set min-width: 0.
In practice, you can set the zeroMinWidth property:

<Grid item xs zeroMinWidth>
  <Typography noWrap>

Download Details:

Author: mathew-kurian

GitHub: https://github.com/mathew-kurian/react-fast-grid

#reactjs #javascript