@bassyu/layout-component v1.1.2

@bassyu/layout-component

Container

기본적인 컨테이너 레이아웃 입니다.

가운데 정렬을 합니다.

속성

예제

import { Container } from '@bassyu/layout-component';

const App = () => (
  <Container minWidth={600} maxWidth={960}>
    <div>Content</div>
  </Container>
);

Grid

Grid 레이아웃의 속성을 사용하는 컴포넌트 입니다.

속성

Container 속성을 상속 받습니다.

예제

import { Grid } from '@bassyu/layout-component';

const App = () => (
  <Grid rows={3} columns={3} gap={10} minWidth={600} maxWidth={960}>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Grid>
);

Flex

Flex 레이아웃의 속성을 사용하는 컴포넌트 입니다.

속성

Container 속성을 상속 받습니다.

예제

import { Flex } from '@bassyu/layout-component';

const App = () => (
  <Flex direction="row" justify="center" align="center" gap={5} minWidth={600} maxWidth={960}>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Flex>;
);

Masonry

자식의 높이를 계산해서 Masonry 레이아웃으로 재정렬 해주는 컴포넌트입니다.

속성

Container 속성을 상속 받습니다.

예제

import { Masonry } from '@bassyu/layout-component';

const App = () => (
  <Masonry columns={3} gap={5} minWidth={600}>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </Masonry>;
);