Grid

Grid

웹 페이지의 레이아웃을 구성하는 2차원(행과 열)의 시스템 Grid 컴포넌트입니다.

import { Grid } from 'hae_on-layout-component';

Props

props	value	description
areas?	string	Grid의 영역을 정의합니다.
rows?	number	Grid의 행 수를 지정합니다.
columns?	number	Grid의 열 수를 지정합니다.
gap?	number	Grid Item 사이의 간격을 지정합니다.
height?	string	Grid의 높이를 지정합니다.
children	ReactNode[]	Grid의 자식 컴포넌트입니다.

Example

결과

Loading...

라이브 에디터

<Grid columns={5} gap={4}> <GridItem col={2} height='30px' backgroundColor='#D8EAFF' /> <GridItem colStart={4} colEnd={6} height='30px' backgroundColor='#FFEC99' /> </Grid>

<Grid columns={5} gap={4}>
  <GridItem col={2} height='30px' backgroundColor='#D8EAFF' />
  <GridItem colStart={4} colEnd={6} height='30px' backgroundColor='#FFEC99' />
</Grid>