Grid
반응형 웹을 체계적이고 쉽게 구현하기 위해 그리드 시스템을 이용합니다.
Grid option
다양한 기기를 대응하기 위해 분기 지점을 세분화합니다.
| 매우 작은 기기 모바일폰 (<768px) | 작은 기기 태블릿 (≥768px) | 중간 기기 데스크탑 (≥992px) | 큰 기기 데스크탑 (≥1200px) | |
|---|---|---|---|---|
| 그리드 적용 | 항상 | 분기점보다 크면 적용 | ||
| 콘테이너 너비 | 없음 (auto) | 750px | 970px | 1170px |
| 클래스 접두사 | .xe-col-xs- |
.xe-col-sm- |
.xe-col-md- |
.xe-col-lg- |
| 컬럼 수 | 12 | |||
| 컬럼 너비 | Auto | ~62px | ~81px | ~97px |
| 사이 너비 | 30px (컬럼의 양쪽에 15px 씩) | |||
| 중첩 | 예 | |||
| 오프셋 | 예 | |||
| 컬럼 순서정하기 | 예 | |||