React awesome styled grid
Edit page
Getting StartedUsageResponsiveOffsetOrderAlignmentRow reverseColumn reverseVisibleHiddenScreenClassScreenBadgeTable of propsUtilitiesPlaygroundCustom configuration

Usage

import { Container, Row, Col, Visible, Hidden, ScreenClass, ScreenBadge } from 'react-awesome-styled-grid'

Resizes your window to see the responsive magic happening 😎

Responsive

xs=2 sm=6 md=2 lg=6
xs=2 sm=2 md=6 lg=6
xs=2 sm=2 md=6 lg=6
xs=2 sm=6 md=2 lg=6
xs=2 sm=6 md=2 lg=6
xs=2 sm=2 md=6 lg=6

💡Tip! if no dimension is defined, the column size will be auto. (i.e. md={6}. This means that xs and sm is auto, and from md, the size will be 6 columns)

<Container>
  <Row>
    <Col debug xs={2} sm={6} md={2} lg={6}>
      xs={2} sm={6} md={2} lg={6}
    </Col>
    <Col debug xs={2} sm={2} md={6} lg={6}>
      xs={2} sm={2} md={6} lg={6}
    </Col>
  </Row>
  <Row>
    <Col debug xs={1} sm={4} md={3} lg={4}>
      xs={1} sm={4} md={3} lg={4}
    </Col>
    <Col debug xs={3} sm={4} md={5} lg={8}>
      xs={3} sm={4} md={5} lg={8}
    </Col>
  </Row>
</Container>

Offset

Using number

if you enter a number, the number of columns of the screen xs will be used as base. in this example, 2 columns of 4 will be used for both offset and column size, ie 50%.

50% offset

Using object

in this case, the offset prop must receive an object with the screens and their respective values.

 
 
 
 
 
 
 
 
 
 
 
<Container>
  <Row><Col debug xs={1} sm={1} lg={1} offset={{ xs:3, sm:7, lg:11}}>&nbsp;</Col></Row>
  <Row><Col debug xs={1} sm={1} lg={2} offset={{ xs:3, sm:7, lg:10}}>&nbsp;</Col></Row>
  <Row><Col debug xs={1} sm={2} lg={3} offset={{ xs:3, sm:6, lg:9}}>&nbsp;</Col></Row>
  <Row><Col debug xs={2} sm={3} lg={4} offset={{ xs:2, sm:5, lg:8}}>&nbsp;</Col></Row>
  <Row><Col debug xs={2} sm={4} lg={5} offset={{ xs:2, sm:4, lg:7}}>&nbsp;</Col></Row>
  <Row><Col debug xs={2} sm={5} lg={6} offset={{ xs:2, sm:3, lg:6}}>&nbsp;</Col></Row>
  <Row><Col debug xs={3} sm={5} lg={7} offset={{ xs:1, sm:3, lg:5}}>&nbsp;</Col></Row>
  <Row><Col debug xs={3} sm={5} lg={8} offset={{ xs:1, sm:3, lg:4}}>&nbsp;</Col></Row>
  <Row><Col debug xs={3} sm={6} lg={9} offset={{ xs:1, sm:2, lg:3}}>&nbsp;</Col></Row>
  <Row><Col debug xs={4} sm={7} lg={10} offset={{ xs:0, sm:1, lg:2}}>&nbsp;</Col></Row>
  <Row><Col debug xs={4} sm={8} lg={11} offset={{ xs:0, sm:0, lg:1}}>&nbsp;</Col></Row>
</Container>

Order

Using number

If you enter a number, that number will apply to all screens.

order 3
order 1
<Container>
  <Row>
    <Col debug xs={2} order={3}>order 3</Col>
    <Col debug xs={2} order={1}>order 1</Col>
  </Row>
</Container>

Using object

in this case, the order prop must receive an object with the screens and their respective values.

xs=1, sm=4, lg=2
xs=2, sm=3, lg=1
xs=3, sm=2, lg=4
xs=4, sm=1, lg=3
<Container>
  <Row>
    <Col debug xs={2} sm={2} lg={2} order={{ xs: 1, sm: 4, lg: 2 }}>xs=1, sm=4, lg=2</Col>
    <Col debug xs={2} sm={2} lg={2} order={{ xs: 2, sm: 3, lg: 1 }}>xs=2, sm=3, lg=1</Col>
    <Col debug xs={2} sm={2} lg={2} order={{ xs: 3, sm: 2, lg: 4 }}>xs=3, sm=2, lg=4</Col>
    <Col debug xs={2} sm={2} lg={2} order={{ xs: 4, sm: 1, lg: 3 }}>xs=4, sm=1, lg=3</Col>
  </Row>
</Container>

Alignment

The props align and justify allow you to centralize Row or Col content using the align-items and justify-content values from flexbox api

The align and justify props work according to the axis and direction of flex-items. This means that in the Col, the horizontal alignment is changed by prop align and the vertical alignment is changed by prop justify.

Align

The prop align receives a string or a object with the screens and their respective values and will align the content vertically in the Row and will align horizontally in the Col.

Accepted values:

align: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

Using string

Just pass a valid value from flexbox api to align prop

😎
🤩
😱
😍
Aligned at end of row
<Container>
    <Row style={{height: 80}} debug align='center'>
      <Col debug xs={1}>😎</Col>
      <Col debug xs={1}>🤩</Col>
      <Col debug xs={1}>😱</Col>
      <Col debug xs={1}>😍</Col>
    </Row>
    <Row>
      <Col style={{height: 80}} debug xs={4} align='flex-end'>Aligned at end of row</Col>
    </Row>
  </Container>

Using object

in this case, the align prop must receive an object with the screens and their respective values.

💡Tip! When passed an object, since this grid is mobile-first, if a value is entered for a screen (i.e XS), the other screens (SM, MD, LG and XL) will inherit these values ​​if not set. With that in mind, if you enter align={{xs: 'center', lg: 'flex-end'}}, we'll have XS to MD with align set to center and LG to XL set to flex-end.

😎
🤩
😱
😍
XS to MD alignd at end of row, LG to XL is centered
<Container>
    <Row style={{height: 80}} debug align={{xs: 'center', lg: 'flex-end'}}>
      <Col debug xs={1}>😎</Col>
      <Col debug xs={1}>🤩</Col>
      <Col debug xs={1}>😱</Col>
      <Col debug xs={1}>😍</Col>
    </Row>
    <Row>
      <Col style={{height: 80}} debug xs={4} align={{xs: 'flex-end', lg: 'center'}}>XS to MD alignd at end of row, LG to XL is centered</Col>
    </Row>
  </Container>

Justify

The prop justify receives a string or a object with the screens and their respective values and will align the content horizontally in the Row and will align vertically in the Col.

Accepted values:

justify: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

Using string

Just pass a valid value from flexbox api to justify prop

😎
🤩
😱
😍
Vertically centered
<Container>
    <Row debug justify='center'>
      <Col debug justify='center' xs={1}>😎</Col>
      <Col debug justify='center' xs={1}>🤩</Col>
    </Row>
    <Row debug justify='space-between'>
      <Col debug justify='center' xs={1}>😱</Col>
      <Col debug justify='center' xs={1}>😍</Col>
    </Row>
    <Row>
      <Col style={{height: 80}} debug xs={4} justify='center'>Vertically centered</Col>
    </Row>
  </Container>

Using object

in this case, the justify prop must receive an object with the screens and their respective values.

💡Tip! When passed an object, since this grid is mobile-first, if a value is entered for a screen (i.e XS), the other screens (SM, MD, LG and XL) will inherit these values ​​if not set. With that in mind, if you enter justify={{xs: 'center', lg: 'space-between'}}, we'll have XS to MD with justify set to center and LG to XL set to space-between.

😎
🤩
😱
😍
XS to MD is centered and LG to XL at bottom 
<Container>
    <Row debug justify={{xs: 'center', lg: 'space-between'}}>
      <Col debug justify='center' xs={1}>😎</Col>
      <Col debug justify='center' xs={1}>🤩</Col>
    </Row>
    <Row debug justify={{xs: 'space-between', lg: 'center'}}>
      <Col debug justify='center' xs={1}>😱</Col>
      <Col debug justify='center' xs={1}>😍</Col>
    </Row>
    <Row>
      <Col style={{height: 80}} debug xs={4} justify={{xs: 'center', lg: 'flex-end'}}>XS to MD is centered and LG to XL at bottom </Col>
    </Row>
  </Container>

Row reverse

reverse receives an array with the screens that will have the flow reversed. if it is passed as boolean, the stream will be inverted at all breakpoints

Column A
Column B
Column A
Column B
<Container>
  <Row reverse={['md']}>
    <Col debug xs={2}>Column A</Col>
    <Col debug xs={2}>Column B</Col>
  </Row>
  <Row reverse>
    <Col debug xs={2}>Column A</Col>
    <Col debug xs={2}>Column B</Col>
  </Row>
</Container>

Column reverse

reverse receives an array with the screens that will have the flow reversed. if it is passed as boolean, the stream will be inverted at all breakpoints

Column A
Column B
Column C
Column A
Column B
Column C
<Container>
  <Row>
    <Col noGutter reverse={['md', 'lg']}>
      <div style={{backgroundColor: '#5901ad40', outline: '1px solid #fff'}}>Column A</div>
      <div style={{backgroundColor: '#5901ad40', outline: '1px solid #fff'}}>Column B</div>
      <div style={{backgroundColor: '#5901ad40', outline: '1px solid #fff'}}>Column C</div>
    </Col>
        <Col noGutter reverse>
      <div style={{backgroundColor: '#5901ad40', outline: '1px solid #fff'}}>Column A</div>
      <div style={{backgroundColor: '#5901ad40', outline: '1px solid #fff'}}>Column B</div>
      <div style={{backgroundColor: '#5901ad40', outline: '1px solid #fff'}}>Column C</div>
    </Col>
  </Row>
</Container>

Visible

Show a element only in a specific screen size

Example using only text

This text is visible only on: XS
<div>
  <Visible xs>This text is visible only on: XS</Visible>
  <Visible sm>This text is visible only on: SM</Visible>
  <Visible md>This text is visible only on: MD</Visible>
  <Visible lg>This text is visible only on: LG</Visible>
  <Visible xl>This text is visible only on: XL</Visible>
</div>

Example using an Row with Col

Visible only on XS and SM screens
<Container>
  <Row>
    <Visible xs sm>
      <Col debug>Visible only on XS and SM screens</Col>
    </Visible>
    <Visible md lg xl>
      <Col debug>Visible only on MD, LG and XL screens</Col>
    </Visible>
  </Row>
</Container>

Hidden

Hides a element only in a specific screen size

Example using only text

This text is hidden only on: SM
This text is hidden only on: MD
This text is hidden only on: LG
This text is hidden only on: XL
<div>
  <Hidden xs><div>This text is hidden only on: XS</div></Hidden>
  <Hidden sm><div>This text is hidden only on: SM</div></Hidden>
  <Hidden md><div>This text is hidden only on: MD</div></Hidden>
  <Hidden lg><div>This text is hidden only on: LG</div></Hidden>
  <Hidden xl><div>This text is hidden only on: XL</div></Hidden>
</div>

Example using an Row with Col

Hidden only on MD, LG and XL screens
<Container>
  <Row>
    <Hidden xs sm>
      <Col debug>Hidden only on XS and SM screens</Col>
    </Hidden>
    <Hidden md lg xl>
      <Col debug>Hidden only on MD, LG and XL screens</Col>
    </Hidden>
  </Row>
</Container>

ScreenClass

ScreenClass receive a prop named render and renders this by passing the current screen as parameter

Hello! Actual screen is xs

<Container>
  <Row>
    <Col debug><ScreenClass render={(screen) => (
        <p style={{ color: ['sm', 'md'].includes(screen) ? 'red' : 'purple' }}>Hello! Actual screen is {screen}</p>
      )} />
    </Col>
  </Row>
</Container>

ScreenBadge

Displays a badge in the lower right corner with the current screen for debug

<ScreenBadge />