React awesome styled grid
Edit page
Getting StartedInstallationBasic usageUsageTable of propsUtilitiesPlaygroundCustom configuration

Getting Started

npm version

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

Installation

npm i 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>
)