Skip to main content

Usage

Code example​
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)

Code example​
<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.

 

 

 

 

 

 

 

 

 

 

 

Code example​
<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​

You can order the columns by occlunes using the order property. This is mainly useful when it is necessary for the columns to have a different order for one dimension or another.

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

order 3

order 1

Code example​
<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.

Column A

Column B

Column C

Column D

Code example​
<Container>
  <Row>
    <Col debug xs={2} sm={2} order={{ xs: 1, sm: 4, lg: 2 }}>
      Column A
    </Col>
    <Col debug xs={2} sm={2} order={{ xs: 2, sm: 3, lg: 1 }}>
      Column B
    </Col>
    <Col debug xs={2} sm={2} order={{ xs: 3, sm: 2, lg: 4 }}>
      Column C
    </Col>
    <Col debug xs={2} sm={2} order={{ xs: 4, sm: 1, lg: 3 }}>
      Column D
    </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

Code example​
<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

Code example​
<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

Code example​
<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

Code example​
<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

Code example​
<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

Code example​
<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
Code example​
  <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
Code example​
<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
Code example​
  <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
Code example​
<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

Code example​
<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

Code example​