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

Useful Grid/Hidden algorithm from Material-UI
https://github.com/mathew-kurian/react-fast-grid

column-reverse flex flexbox grid grid-layout grids hidden material-ui react

Last synced: about 23 hours ago
JSON representation

Useful Grid/Hidden algorithm from Material-UI

• Host: GitHub
• URL: https://github.com/mathew-kurian/react-fast-grid
• Owner: mathew-kurian
• License: mit
• Created: 2020-03-04T22:33:40.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-08-14T17:14:52.000Z (over 4 years ago)
• Last Synced: 2024-08-08T23:14:58.194Z (3 months ago)
• Topics: column-reverse, flex, flexbox, grid, grid-layout, grids, hidden, material-ui, react
• Language: TypeScript
• Homepage: https://react-fast-grid.vercel.app/
• Size: 115 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Fast Grid (+ Hidden)

![CI](https://github.com/mathew-kurian/react-fast-grid/workflows/CI/badge.svg) [![npm version](https://badge.fury.io/js/react-fast-grid.svg)](https://badge.fury.io/js/react-fast-grid)

### [Demo](https://react-fast-grid.vercel.app/)

[![Edit React Fast Grid](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/grid-layout-wrc4q?fontsize=14&hidenavigation=1&theme=dark)

Useful algorithm extracted from [Material-UI Grid](https://material-ui.com/components/grid/#grid) and [Material-UI Hidden](https://material-ui.com/components/hidden/)

```

npm install react-fast-grid

```

## IE11 Comptability

Supported on IE11+

## 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 ``.

There are 3 available workarounds:

1. Not using the spacing feature and implementing it in user space `spacing={0}` (default).

2. Applying padding to the parent with at least half the spacing value applied to the child:

```jsx

  


    

      //...

    

  


```

3. 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:

```jsx

  

```

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:

```jsx

  

```