react-grid-system
Version:
A powerful Bootstrap-like responsive grid system for React.
317 lines (274 loc) • 7.09 kB
Markdown
Resize your browser or load on different devices to test the grid system.
### Example: Equal-width
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row debug>
<Col debug>1 of 2</Col>
<Col debug>2 of 2</Col>
</Row>
<br />
<Row debug>
<Col debug>1 of 3</Col>
<Col debug>2 of 3</Col>
<Col debug>3 of 3</Col>
</Row>
</Container>
```
### Example: Stacked to horizontal
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row debug>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
<Col md={1} debug>md=1</Col>
</Row>
<br />
<Row debug>
<Col md={8} debug>md=8</Col>
<Col md={4} debug>md=4</Col>
</Row>
<br />
<Row debug>
<Col md={4} debug>md=4</Col>
<Col md={4} debug>md=4</Col>
<Col md={4} debug>md=4</Col>
</Row>
<br />
<Row debug>
<Col md={6} debug>md=6</Col>
<Col md={6} debug>md=6</Col>
</Row>
</Container>
```
### Example: Mix and match
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row debug>
<Col xs={12} md={8} debug>xs=12 md=8</Col>
<Col xs={6} md={4} debug>xs=6 md=4</Col>
</Row>
<br />
<Row debug>
<Col xs={6} md={4} debug>xs=6 md=4</Col>
<Col xs={6} md={4} debug>xs=6 md=4</Col>
<Col xs={6} md={4} debug>xs=6 md=4</Col>
</Row>
<br />
<Row debug>
<Col xs={6} debug>xs=6</Col>
<Col xs={6} debug>xs=6</Col>
</Row>
</Container>
```
### Example: Column wrapping
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row debug>
<Col xs={9} debug>xs=9</Col>
<Col xs={4} debug>xs=4<br/>Since 9 + 4 = 13 > 12, this 4-column-wide Col gets wrapped onto a new line as one contiguous unit.</Col>
<Col xs={6} debug>xs=6<br/>Subsequent columns continue along the new line.</Col>
</Row>
</Container>
```
### Example: Vertical alignment
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row align="start" style={{ height: '75px' }} debug>
<Col debug>1 of 3</Col>
<Col debug>2 of 3</Col>
<Col debug>3 of 3</Col>
</Row>
<br />
<Row align="center" style={{ height: '75px' }} debug>
<Col debug>1 of 3</Col>
<Col debug>2 of 3</Col>
<Col debug>3 of 3</Col>
</Row>
<br />
<Row align="end" style={{ height: '75px' }} debug>
<Col debug>1 of 3</Col>
<Col debug>2 of 3</Col>
<Col debug>3 of 3</Col>
</Row>
<br />
<Row align="stretch" style={{ height: '75px' }} debug>
<Col debug>1 of 3</Col>
<Col debug>2 of 3</Col>
<Col debug>3 of 3</Col>
</Row>
</Container>
```
### Example: Horizontal alignment
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row justify="start" debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
<Row justify="center" debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
<Row justify="end" debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
<Row justify="between" debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
<Row justify="around" debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
<Row justify="initial" debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
<Row justify="inherit" debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
</Container>
```
### Example: Direction prop for order and orientation of Row children
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row align="center" justify="center" direction="row" style={{ height: '300px' }} debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
<Row align="center" justify="center" direction="row-reverse" style={{ height: '300px' }} debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
<Row align="center" justify="center" direction="column" style={{ height: '300px' }} debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
<Row align="center" justify="center" direction="column-reverse" style={{ height: '300px' }} debug>
<Col xs={3} debug>1 of 3</Col>
<Col xs={3} debug>2 of 3</Col>
<Col xs={3} debug>3 of 3</Col>
</Row>
<br />
</Container>
```
### Example: Offsetting columns
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row debug>
<Col md={4} debug>md=4</Col>
<Col md={4} offset={{ md: 4 }} debug>md=4 offset-md=4</Col>
</Row>
<br />
<Row debug>
<Col md={3} offset={{ md: 3 }} debug>md=3 offset-md=3</Col>
<Col md={3} offset={{ md: 3 }} debug>md=3 offset-md=3</Col>
</Row>
<br />
<Row debug>
<Col md={6} offset={{ md: 3 }} debug>md=6 offset-md=3</Col>
</Row>
</Container>
```
### Example: Nesting columns
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row debug>
<Col sm={9} debug>
Level 1: sm=9
<Row>
<Col xs={8} sm={6} debug>
Level 2: xs=8 sm=6
</Col>
<Col xs={4} sm={6} debug>
Level 2: xs=4 sm=6
</Col>
</Row>
</Col>
</Row>
</Container>
```
### Example: Column ordering
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row debug>
<Col md={9} push={{ md: 3 }} debug>md=9 push-md=3</Col>
<Col md={3} pull={{ md: 9 }} debug>md=3 pull-md=9</Col>
</Row>
</Container>
```
### Example: Custom gutter width
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row nogutter debug>
<Col md={8} debug>md=8</Col>
<Col md={4} debug>md=4</Col>
</Row>
<br />
<Row gutterWidth={16} debug>
<Col md={8} debug>md=8</Col>
<Col md={4} debug>md=4</Col>
</Row>
</Container>
```
### Example: Column width adapted to content
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row debug>
<Col debug>Logo (Flexible column)</Col>
<Col xs="content" debug> Menu with x-items</Col>
</Row>
</Container>
```
### Example: Ordering Cols adapted to content
```js
import { Container, Row, Col } from '.';
<Container fluid>
<Row debug>
<Col debug order={{md: 1, xl: 2}}>First on md, last on xl </Col>
<Col order={{md: 2, xl: 1}} debug>First on xl, last on md</Col>
</Row>
</Container>
```