Basic Usage

The responsive grid will help layout app elements in a way that follows the grid as represented by the Design Team

This grid system is based on Google Material Design

Number of columns:

Size
Number of Columns
Breakpointxs
4
1remsm
6
640pxmd
6
768pxlg
12
1024pxxl
12
1280px

---

Screen Size:

xl

1 width

50% Width for each breakpoint

100% Width for each breakpoint

import { Container, Row, Col } from '@candy/kitkat/grid'

export const MyComponent = () => {
  return (
    <Container>
      <Row>
        <Col xs={1} sm={1} md={1} lg={1} xl={1}>
          1 Column Width for each breakpoint
        </Col>

        <Col xs={2} sm={3} md={3} lg={12} xl={12}>
          50% Width for each breakpoint
        </Col>

        <Col xs={4} sm={6} md={6} lg={12} xl={12}>
          100% Width for each breakpoint
        </Col>
      </Row>
    </Container>
  )
}