Getting Started

A responsive (mobile-first) grid system for React using styled-components

Installation

npm

npm i react-awesome-styled-grid

Yarn

yarn add react-awesome-styled-grid

pnpm

pnpm add react-awesome-styled-grid

Basic usage

This grid system is based on Google Material Design.

Number of columns: xs: 4, sm: 8, md: 8, lg: 12, xl: 12

Breakpoints size: xs: 1rem, sm: 48rem, md: 64rem, lg: 90rem, xl: 120rem

for a custom configuration, see this section

import { Container, Row, Col } from "react-awesome-styled-grid";

const MyCoolComponent = () => (
  <Container>
    <Row>
      <Col xs={4} md={2}>
        Col A
      </Col>
      <Col xs={4} md={6}>
        Col B
      </Col>
    </Row>
  </Container>
);