Grid Layout
Back
1. <div> 그리드
2열 : ui-grid-a
1행1열 ui-block-a
1행2열 ui-block-b
2행1열 ui-block-a
2행2열 ui-block-b
3열 : ui-grid-b
1행1열 ui-block-a
1행2열 ui-block-b
1행3열 ui-block-c
2행1열 ui-block-a
2행2열 ui-block-b
2행3열 ui-block-c
4열 : ui-grid-c
1행1열 ui-block-a
1행2열 ui-block-b
1행3열 ui-block-c
1행4열 ui-block-d
2행1열 ui-block-a
2행2열 ui-block-b
2행3열 ui-block-c
2행4열 ui-block-d
5열 : ui-grid-d
1행1열 ui-block-a
1행2열 ui-block-b
1행3열 ui-block-c
1행4열 ui-block-d
1행5열 ui-block-e
2행1열 ui-block-a
2행2열 ui-block-b
2행3열 ui-block-c
2행4열 ui-block-d
2행5열 ui-block-e
2. <fieldset> 그리드
Normal Input :
ui-grid-b(2열)
Reset
3. 다행 그리드 + height
ui-grid-b => 3열
ui-block-a
ui-block-b
ui-block-c
ui-block-a
ui-block-b
ui-block-c
4. 다양한 그리드 조합 + ui-bar 스타일
ui-grid-d => 5열
ui-block-a ui-bar-a
ui-block-b ui-bar-b
ui-block-c ui-bar-c
ui-block-d ui-bar-d
ui-block-e ui-bar-e
ui-grid-d => 5열
ui-block-a ui-bar-c
ui-block-b ui-bar-d
ui-block-c ui-bar-e
ui-grid-b => 3열
ui-block-a
ui-bar ui-bar-a
ui-block-b
ui-bar ui-bar-b
ui-block-c
ui-bar ui-bar-c
ui-grid-b => 3열
ui-block-a
ui-bar ui-bar-a style="height:100px"
ui-block-b
ui-bar ui-bar-b style="height:100px"
ui-block-c
ui-bar ui-bar-c style="height:100px"
5. 그리드안 그리드 상속
1행1열
1행2열
1행3열
1행1열
1행1열
2행1열
2행1열
2행1열
2행2열
2행3열
Index
버튼2