Grid는 컨테이너 내부 요소를 행(Row)과 열(Column) 구조로 정렬할 수 있는 레이아웃 방식입니다.

일정한 간격과 비율로 요소를 배치할 수 있어 복잡한 화면 구성을 체계적으로 관리할 수 있습니다.

Grid 옵션

1. 모듈 수

Grid를 구성하는 전체 모듈의 개수(1/2/3/4/5/6/12)를 설정합니다. 설정한 모듈 수에 따라 내부 요소가 균등한 크기의 영역으로 나뉘어 배치됩니다.

모듈 수 : 3
모듈 수 : 6

2. 여백 표시

모듈 간 간격(여백) 적용 여부를 설정합니다. 활성화 시 각 모듈 사이에 간격이 적용되며, 여백 영역을 드래그하여 모듈 너비를 조절할 수 있습니다.

여백 표시 : 활성화
여백 표시 : 비활성화

3. 배치

한 행에 배치할 모듈의 개수를 설정합니다. 설정값에 따라 자동으로 다음 행으로 줄바꿈되어 배치됩니다.

모듈 수 : 6 / 여백 표시 : 활성화 / 배치 : 행당 3 모듈

4. 수직 정렬

각 모듈 내부 요소의 세로 정렬 방식(정상/가운데/바닥)을 설정합니다.

DKU 그리드

기본 'Grid' 프래그먼트는 모바일 환경에서 모듈이 세로 방향으로 재배치됩니다.

모바일에서도 가로 배치를 유지하려면 'Grid' 대신 'DKU 그리드' 프래그먼트를 사용해야 하며, '반응형 활성' 옵션을 비활성화해야 합니다.