Grid

Grid를 중첩하여 사용할 때 JavaScript가 렌더링한 요소의 크기 계산이 엇갈리면 레이아웃이 깨질 수 있습니다.
이 경우, Grid 안에서 Flex를 함께 사용하면 안정적인 정렬이 가능합니다.

variables/_global.scss 파일의 $g_grid 맵에 Grid 단위를 자유롭게 추가할 수 있습니다.
💡 Grid와 Flex의 차이

Grid는 정렬된 구조에 적합하고, Flex는 유연한 콘텐츠 배치에 적합합니다.
둘의 차이를 이해하고 상황에 맞게 선택해 주세요.

구분 Grid Flex
기본 구조 격자(Grid) 형식으로 배치
열/행 단위로 정렬됨		 요소가 한 방향(가로/세로)으로 흐르며 유연하게 배치됨
카드 높이 가장 긴 콘텐츠에 맞춰
모든 카드가 동일한 높이		 각 카드의 콘텐츠 길이에 따라
높이가 각각 달라짐
레이아웃 정렬 정해진 영역 안에 딱 맞게 정렬됨 남는 공간에 따라 자동 정렬되거나 유동적임
사용 시점 격자 형태로 항목을
정렬된 구조로 보여주고 싶을 때		 정렬이 자주 바뀌거나
콘텐츠 높이가 유동적인 경우
주의사항 JavaScript 렌더링 요소가
많아지면 높이 계산이 어긋날 수 있음
→ flex 병행 권장 		요소 간 높이 차이가 클 경우
레이아웃이 불균형해 보일 수 있음
Anatomy
Grid 유틸리티 클래스는 기본적으로 desktop 그룹을 기준으로 동작합니다.
접두어(prefix)를 생략하고 브레이크포인트를 지정하면 desktop 그룹 내 반응형 스타일로 동작합니다.
ex) .col-xl-6은 desktop 그룹의 xl 이하에서 6칸을 차지합니다.

접두어를 사용하면 tablet(t-) 및 mobile(m-) 그룹에 대응하는 반응형 스타일을 적용할 수 있습니다.

클래스 설명

클래스명 설명
.grid-* 열(Column)을 기준으로 레이아웃을 나누는 Grid 컨테이너입니다.
예: .grid-12는 12개의 column을 생성합니다.
.gap-* Grid 항목 간의 간격을 설정합니다.
예: .gap-8은 row/column 간격을 8단계로 설정합니다.
.col-* Grid 내부 요소의 열 너비를 설정합니다.
예: .col-4는 전체 12칸 중 4칸을 차지합니다.
.row-* Grid의 세로 방향(row)의 비율을 설정합니다.
주로 정사각 레이아웃이나 가변 높이 구성이 필요할 때 사용됩니다.
.grid-[prefix]-[breakpoint]-*

.gap-[prefix]-[breakpoint]-*

.col-[prefix]-[breakpoint]-*

.row-[prefix]-[breakpoint]-* 		브레이크포인트 기준으로 반응형 스타일을 적용할 때 사용합니다.

접두어(prefix): m (mobile), t (tablet), desktop은 생략

예시
  • .col-t-lg-6 → tablet의 lg (1280px 이하)에서 6칸 차지
  • .gap-m-2xl-4 → mobile의 2xl (430px 이하)에서 간격 4 적용


모든 브레이크포인트는 max-width 기준이며, 변수 $g_media-breakpoint에 정의되어 있습니다.
Grid Layout Examples

Card UI를 활용한 예시입니다.
*-t-xl 를 기준으로 반응형 처리 됩니다.

기본

콘텐츠는 상단을 기준으로 배치됨

중앙 정렬

.my-auto 사용

내용이 길어지는 경우

이 영역은 콘텐츠가 들어가는 부분입니다. 콘텐츠는 별도의 엘리먼트로 감싸서 추가하며, 내부 콘텐츠의 길이에 따라 카드의 전체 높이도 함께 늘어납니다.
내용이 많아질 경우 자동으로 높이가 확장되도록 설계되어 있습니다.

높이를 따로가는 경우

Grid 레이아웃을 설정하는 col-* 요소와 분리된 구조로 구성합니다
다른 카드와 독립적으로 높이를 설정할 수 있습니다.

Grid 중첩하여 사용 👉🏻

grid-row-*를 사용하여 항목들을 일정한 세로 비율로 나열할 수 있습니다.
카드 높이를 통일시키고 싶은 경우 유용합니다. (높이가 일정하게 배치)

.grid-row-3 > .row-1

.grid-row-* 안에 위치하며, 각 row의 세로 비율에 따라 높이가 지정됩니다.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세

.grid-row-3 > .row-1

콘텐츠

.grid-row-3 > .row-1

콘텐츠

Flex 중첩하여 사용 👉🏻

Grid 내부에 flex 레이아웃을 중첩 사용한 예시입니다.
JavaScript 렌더링 요소의 위치가 어긋나는 문제를 방지하기 위해
Grid 대신 Flex를 사용해 안정적인 레이아웃을 구성합니다.

Flex Col Card

.flex-col 안에 위치하며,
Flex를 기반으로 구성되어 콘텐츠 길이에 관계없이 정렬이 자연스럽게 유지됩니다.

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세 남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세

Flex Col Card

콘텐츠

Flex Col Card

콘텐츠