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...
라이브 에디터