Getting Started

Get started in your project.

Or try Acrool React Grid with CodeSandbox.

What you'll need

• Node.js version 14 or above:
• React.js version 18 or above:
• Styled-components version 5.3.x

Installation

yarn add styled-components1 @acrool/react-grid

in your packages. (Make the version of styled-component you use match the version of styled-component used in bear-react-gird)

package.json

"resolutions": {
   "styled-components": "5.3.11"
}

You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.

Start your project

Add the required style files to your project entry point

/src/App.tsx

import '@acrool/react-grid/dist/index.css';

setting your grid

import {GridThemeProvider, IGridSetting} from '@acrool/react-grid';
import '@acrool/react-grid/dist/index.css';


const gridTheme: IGridSetting = {
    spacer: '1rem',
    gridColumns: 12,
    gridBreakpoints: {
        xs: 0,
        sm: 576,
        md: 768,
        lg: 992,
        xl: 1200,
        xxl: 1540,
    },
    containerMaxWidths: {
        sm: 540,
        md: 720,
        lg: 960,
        xl: 1140,
        xxl: 1141,
    },
}

// Do not use GridThemeProvider again in the lower layer to cause secondary generation: the root parameter overwrites the original parameter
<GridThemeProvider gridTheme={gridTheme}>
    <App/>
</GridThemeProvider>

use component

import styled from 'styled-components';
import {Container, Row, Col, media} from '@acrool/react-grid';

const MyPage = () => {
    return (
        <Container>
            <Row>
                <Col col={12} md style={{background: '#760e0e', textAlign: 'center'}}>col</Col>
                <Col col={12} md style={{background: '#6c760e', textAlign: 'center'}}>col</Col>
                <Col col={12} md style={{background: '#0e7659', textAlign: 'center'}}>col</Col>
                <Col col={12} md style={{background: '#760e6e', textAlign: 'center'}}>col</Col>
            </Row>
        </Container>
    );
}

Then seeing this means you succeeded

col

col

col

col