responsive-react-grid

responsive-react-grid is a react layout used to responsively align components in a grid fashion.

Getting Started

responsive-react-grid package functionality can be implemented using <Grid> tag. The components to be aligned should be given as children.

Installing

npm install responsive-react-grid

Usage

Here's an example of basic usage:

import Grid from 'responsive-react-grid';

class MyApp extends Component {

    render() {
    const arrayData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 1];
    const style = {
        height: 200,
        minWidth: 200,
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'center',
        backgroundColor: 'yellow'
    }
    return (
        <Grid>
            {arrayData.map(data => (
            <div style={style}>
                {data}
            </div>
            ))}
        </Grid>
    );
  }
}