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
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.
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:
spacing={0}
(default).<body>
<div style={{ padding: 20 }}>
<Grid container spacing={5}>
//...
</Grid>
</div>
</body>
overflow-x: hidden;
to the parent.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>
Author: mathew-kurian
GitHub: https://github.com/mathew-kurian/react-fast-grid
#reactjs #javascript