Maeng Design

Grid

Maeng Design의 Grid 컴포넌트는 12 그리드 시스템을 기반으로 24개의 섹션으로 나누었습니다.

Design Concept

100%
25%
25%
25%
25%
33.33%
33.33%
33.33%
50%
50%
66.66%
33.33%

Grid

component를 지정해서 원하는 HTML Element로 생성할 수 있습니다.
DIV
SECTION
import React from 'react';
import { Grid } from 'maeng-design';

const App = () => (
  <div>
    <Grid className="example" />
    <Grid className="example" component="section" />
  </div>
);

Row

gutter을 이용하여 Column 사이의 수평 및 수직 간격을 조절할 수 있습니다.
Col
Col
Col
Col
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>
);

Col

xs, sm, md, lg, xl, xxl 6가지의 옵션을 통해 반응형 디자인을 구현할 수 있습니다.
Col
Col
Col
Col
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>
);

Grid API

component를 지정해서 원하는 HTML Element로 생성할 수 있습니다.
PropertyDescriptionTypedefault
component원하는 HTML Element로 생성할 수 있습니다.HTMLElementdiv

Row API

PropertyDescriptionTypedefault
gutterColumn 사이의 수평 및 수직 간격을 조절할 수 있습니다.number | number[][0, 0]

Col API

PropertyDescriptionTypedefault
xsscreen < 576px 일 경우의 너비를 지정합니다.number-
smscreen >= 576px 일 경우의 너비를 지정합니다.number-
mdscreen >= 768px 일 경우의 너비를 지정합니다.number-
lgscreen >= 992px 일 경우의 너비를 지정합니다.number-
xlscreen >= 1200px 일 경우의 너비를 지정합니다.number-
xxlscreen >= 1600px 일 경우의 너비를 지정합니다.number-
Made by Maeng