본문바로가기

Theme

Layout Grid

Basic
  • Alopex UI의 Grid System은 기본 12column으로 나뉘어져 있습니다.
  • 각 Grid마다 percentage로 width 영역이 결정되며 12column을 기준으로 표현하고자 하는 column수를 넣으면 쉽게 적용 가능합니다.
  • Grid는 반응형인 경우 반응형이 아닌경우 부모 class의 명칭이 다르게 적용됩니다.
    • [반응형이 아닌경우] 부모 class는 .Grid-wrapper 적용
    • [반응형인 경우] 부모 class는 .Grid-container 적용
  • 반응형이 아닌경우 .Grid-wrapper 는 Media 사이즈에 따라 적용 할 수 있습니다.
    • [Desktop size로 적용할 경우] document 사이즈를 desktop size 인 width: 970px에 맞출 경우에는 .Grid-wrapper Lg 를 적용합니다.
    • [Tablet size로 적용할 경우] Tablet size인 width: 750px에 맞출 경우.Grid-wrapper Md 를 적용합니다.
    • 그 외 상황에 대해서는 해당 .Grid-wrapper class 를 수정하여 알맞은 width 와 margin 값을 맞추어 사용하시면 됩니다.
  • 1column을 나타내므로 .Grid-sm-1을 class로 선언합니다.

Examples

12 columns

1
2
3
4
5
6
7
8
9
10
11
12
<div class="Grid-wrapper">
	<div class="Grid-sm-1">1</div>
	<div class="Grid-sm-1">2</div>
	<div class="Grid-sm-1">3</div>
	<div class="Grid-sm-1">4</div>
	<div class="Grid-sm-1">5</div>
	<div class="Grid-sm-1">6</div>
	<div class="Grid-sm-1">7</div>
	<div class="Grid-sm-1">8</div>
	<div class="Grid-sm-1">9</div>
	<div class="Grid-sm-1">10</div>
	<div class="Grid-sm-1">11</div>
	<div class="Grid-sm-1">12</div>
</div>

4 columns

  • 4개/12column 이므로 각각 3개의 column 영역을 가집니다. .Grid-sm-3으로 각각 선언합니다.
3
3-2
3-3
3-4
<div class="Grid-wrapper">
	<div class="Grid-sm-3">3</div>
	<div class="Grid-sm-3">3-2</div>
	<div class="Grid-sm-3">3-3</div>
	<div class="Grid-sm-3">3-4</div>
</div>

column 중첩

  • column 안에 column을 적용할 경우 (중첩:nesting)
  • 전체 Grid 영역 12column 에서 9column의 공간에만 컨텐츠를 넣을 예정이고 그 안에 각각 50% 씩 section을 나누고자 하는 경우
    • .Grid-wrapper로 먼저 div를 하나 선언합니다.
    • 자식으로 9column에 해당하는 .Grid-sm-9 class를 포함하는 영역을 하나 선언합니다.
    • 위의 9column의 자식으로 그 영역을 2개로 나눌 div 를 하나씩 선언하고 그 해당 div에 .Grid-sm-6를 class로 적용합니다.
    • 자식은 다시 12개의 column을 가질 수 있습니다.
자식 6column
자식 6column
<div class="Grid-wrapper">
	<div class="Grid-sm-9">
		<div class="Grid-sm-6">자식 6column</div>
		<div class="Grid-sm-6">자식 6column</div>
	</div>
</div>

contents

  • 좌우에 각각 컨텐츠를 넣는데 2개로 양분하지 않고 가운데 공간을 두고 좌로 6칸 우로 4칸의 영역을 두고 2칸의 공간을 두고자 할 경우 사용합니다.
    • .Grid-wrapper 로 먼저 div를 하나 선언합니다.
    • 좌우 2개의 컨텐츠 영역을 구성할 div를 형성합니다.
    • 좌의 영역은 6column에 해당하는 .Grid-sm-6를 선언합니다.
    • 우의 영역은 4column에 해당하는 .Grid-sm-4를 선언하고 가운데 공간으로 2column을 구성해주는 .Push-2 class를 추가합니다.
6column
4column에 공간 2column

<div class="Grid-wrapper">
	<div class="Grid-sm-6">6column</div>
	<div class="Grid-sm-4 Push-2">4column에 공간 2column</div>
</div>