React Fast Grid (+ Hidden)
Useful algorithm extracted from Material-UI Grid and Material-UI Hidden
npm install react-fast-grid
Supported on IE11+
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:
- 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.
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>