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-components @acrool/react-grid

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

package.json
"resolutions": {
   "styled-components": "6.1.17"
}

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>

Override css setting

create folder and file: src/library/acrool-react-grid/grid.scss

$breakpoints: (
      sm: 576px,
      md: 768px,
      lg: 992px,
      xl: 1200px,
      xxl: 1440px
);

$grid-gutters: (
    1: 0.25rem,
    2: 0.5rem,
    3: 0.75rem,
    4: 1rem,
    5: 1.25rem,
    6: 1.5rem,
    7: 1.75rem,
    8: 2rem,
    9: 2.25rem,
    10: 2.5rem,
    11: 2.75rem,
    12: 3rem,
    13: 3.25rem,
    14: 3.5rem,
    15: 3.75rem,
    16: 4rem,
    17: 4.25rem,
    18: 4.5rem
);

@import "@acrool/react-grid/dist/styles.scss";

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