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> 그리드




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열