Grid
Maeng Design의 Grid 컴포넌트는 12 그리드 시스템을 기반으로 24개의 섹션으로 나누었습니다.
import React from 'react';
import { Grid } from 'maeng-design';
const App = () => (
<div>
<Grid className="example" />
<Grid className="example" component="section" />
</div>
);
import React from 'react';
import { Grid } from 'maeng-design';
const { Row, Col } = Grid;
const App = () => (
<Grid className="example">
<Row gutter={[16, 16]}>
<Col xs={6}>
<div className="content">Col</div>
</Col>
<Col xs={6}>
<div className="content">Col</div>
</Col>
<Col xs={6}>
<div className="content">Col</div>
</Col>
<Col xs={6}>
<div className="content">Col</div>
</Col>
</Row>
</Grid>
);
import React from 'react';
import { Grid } from 'maeng-design';
const { Row, Col } = Grid;
const App = () => (
<Grid className="example">
<Row gutter={[16, 16]}>
<Col className="col-box" xs={24} md={12} xl={6}>
<div className="content">Col</div>
</Col>
<Col className="col-box" xs={24} md={12} xl={6}>
<div className="content">Col</div>
</Col>
<Col className="col-box" xs={24} md={12} xl={6}>
<div className="content">Col</div>
</Col>
<Col className="col-box" xs={24} md={12} xl={6}>
<div className="content">Col</div>
</Col>
</Row>
</Grid>
);
Property | Description | Type | default |
---|---|---|---|
component | 원하는 HTML Element로 생성할 수 있습니다. | HTMLElement | div |
Property | Description | Type | default |
---|---|---|---|
gutter | Column 사이의 수평 및 수직 간격을 조절할 수 있습니다. | number | number[] | [0, 0] |
Property | Description | Type | default |
---|---|---|---|
xs | screen < 576px 일 경우의 너비를 지정합니다. | number | - |
sm | screen >= 576px 일 경우의 너비를 지정합니다. | number | - |
md | screen >= 768px 일 경우의 너비를 지정합니다. | number | - |
lg | screen >= 992px 일 경우의 너비를 지정합니다. | number | - |
xl | screen >= 1200px 일 경우의 너비를 지정합니다. | number | - |
xxl | screen >= 1600px 일 경우의 너비를 지정합니다. | number | - |