Skip to main content

Getting Started

Get started in your project.

Or try Acrool React Grid with CodeSandbox.

What you'll need

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