ZSR 그리드 요건

1 개요

ZSR UI 그리드 시스템 요건

• grid 클래스 자식으로 col-a-b 클래스 사용
• grid의 종류는 2가지

클래스명	설명
grid	일반 그리드. 반응형. 작은 화면에서는 줄바꿈. 세로로 배열. 각각 100% 너비
grid-x	비반응형(non-responsive). 작은 화면에서도 해당 비율 유지
grid-pad	패딩 적용

• col의 종류는 2가지

클래스명	설명
col	일반 컬럼
dcol	생략가능 컬럼(dropable). 작은 화면에서는 사라짐

• 12 분할 표현 가능

구분	비율	-12	-6	-4	-3	-2
1/12	8.33%	col-1-12
2/12	16.66%	col-2-12	col-1-6
3/12	25%	col-3-12		col-1-4
4/12	33.33%	col-4-12	col-2-6		col-1-3
5/12	41.66%	col-5-12
6/12	50%	col-6-12	col-3-6	col-2-4		col-1-2
7/12	58.33%	col-7-12
8/12	66.66%	col-8-12	col-4-6		col-2-3
9/12	75%	col-9-12		col-3-4
10/12	83.33%	col-10-12	col-5-6
11/12	91.66%	col-11-12
12/12	100%	col-12-12	col-6-6	col-4-4	col-3-3	col-2-2

2 같이 보기

• 부트스트랩 그리드
• 그리드 시스템