본문으로 건너뛰기

Grid

CSS Grid를 사용하여 자식 컴포넌트들을 격자 형태로 배열하는 레이아웃 컴포넌트입니다.

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

Anatomy

  • Grid: CSS Grid 사용해 자식 요소의 레이아웃을 제어하는 부모 컨테이너입니다.
  • Grid.Item: Grid 컴포넌트의 자식 요소입니다.

Usage

Grid 컴포넌트의 사용법은 다음과 같습니다.

Template columns

Grid 컴포넌트에 열과 공백을 적용할 때 사용합니다.

결과
Loading...
라이브 에디터

Spanning columns

Grid.Item이 균등하게 분배되지 않고, 특정 수의 열이나 행을 차지해야 할 때 사용합니다.

결과
Loading...
라이브 에디터

Starting and ending lines

Grid.Item이 어디서 시작하고 끝나는지 설정할 때 사용합니다.

결과
Loading...
라이브 에디터

Template areas

Grid 레이아웃 내에서 영역을 지정할 때 사용합니다. 영역에 이름을 부여해 사용할 수 있습니다.

결과
Loading...
라이브 에디터