---

Hot Demo

even-grid evenmix-1234

even-grid evenmix-1234 tac

중앙정렬

even-grid evenmix-1234 float-left

좌우 맨끝을 정확하게 맞춘다. 좌정렬

even-grid evenmix-1234 flex

좌우 맨끝을 정확하게 맞춘다. 좌정렬

.clearfix 하단은 안되니 스타일 추가 필요

even-grid evenmix-1234 flex jcc

좌우 맨끝을 정확하게 맞춘다. 중앙정렬

even-grid evenmix-1234 flex jcfe

좌우 맨끝을 정확하게 맞춘다. 우정렬

even-grid evenmix-1234 mgl0 mgr0

좌우 맨끝에 여백을 만든다.

even-grid evenmix-1234 float-left mgl0 mgr0 + 외부 래퍼에 padding:0 1%; overflow:hidden; 추가

상하좌우 여백을 동일하게 만든다.

---

gap and collapse

좌우 간격 오차 : 퍼센트 계산에서 .even-grid 와 .column 은 각각 부모로 부터 계산되므로.. .gap4pct 인 경우 전체 가로폭 좌우가 2% 차이 나므로 2 - 2*(100/(2+100+2)) = 0.07692307692307692307692307692308% 의 오차가 발생한다. 가로 폭이 1000px 이라면 0.8px 정도 차이가 이므로 소수점 계산에서 1px 오차가 생긴다. 보통 화면에서 잘 감지되지 않으므로 그대로 사용하여도 무방하지만, 더 견고한 배치를 위해..
정확한 계산 값을 만들었다.
그리고, .gap2px ~ .gap40px 도 추가하였다.

even-grid evenmix-1234 gap8pct float-left

even-grid evenmix-1234 gap7pct float-left

even-grid evenmix-1234 gap6pct float-left

even-grid evenmix-1234 gap5pct float-left

even-grid evenmix-1234 gap4pct float-left

even-grid evenmix-1234 gap4pct

even-grid evenmix-1234 gap3pct

even-grid evenmix-1234 gap2pct

even-grid evenmix-1234 gap1pct

even-grid evenmix-1234 gap0

even-grid evenmix-1234 collapse

even-grid evenmix-1234 float-left collapse

even-grid evenmix-1234 flex collapse

---

gap40px ~ gap2px

even-grid evenmix-1234 float-left gap40px

even-grid evenmix-1234 float-left gap30px

even-grid evenmix-1234 float-left gap20px (기본값)

even-grid evenmix-1234 float-left gap10px

even-grid evenmix-1234 float-left gap8px

even-grid evenmix-1234 float-left gap6px

even-grid evenmix-1234 float-left gap4px

even-grid evenmix-1234 float-left gap2px

---

Demo Even Grid

Basic

even-grid evenmix-1

even-grid evenmix-2

even-grid evenmix-3

even-grid evenmix-12

even-grid evenmix-13

even-grid evenmix-23

even-grid evenmix-14

even-grid evenmix-24

even-grid evenmix-123

even-grid evenmix-124

even-grid evenmix-234

even-grid evenmix-135

even-grid evenmix-246

even-grid evenmix-1234

even-grid evenmix-2345

even-grid evenmix-1246

even-grid evenmix-1357

even-grid evenmix-2468

---

Advanced

---

Demo Each Grid

Basic

---

Small Grid

---

Medium Grid

---

Large Grid

---

Xlarge Grid

---

Advanced

---

small-12 medium-6 large-4 xlarge-3 column

---

Nested

.even-grid > .column   .even-grid > .column

갭(padding 값)이 % 이면 내포 깊이에 따라 부모의 width 에 상대적이므로 간격이 달라진다.

---

내포 코드 형태에 따른 렌더링 비교

행열행열 내포 .even-grid > .column > .even-grid > .column

자식 .even-grid 와 .column 의 상하 여백은 0 으로 렌더링 된다. ( 20181105~ 기존 상하 갭 유지되게 수정함! )
부모 .column 은 정의된대로 padding-top 과 padding-bottom 값을 가진다.

행행열 내포 .even-grid > .even-grid > .column

자식 .even-grid 와 .column 의 상하 여백은 0 으로 렌더링 된다.

---

Vertical Gap (.even-grid 상하 간격 조정하기)

class="even-grid vgap0"

행열행열 .even-grid > .column > .even-grid > .column

행행열 .even-grid > .even-grid > .column

행열 .even-grid > .column

2줄 이상 표현될 경우 맨위 맨아래 여백은 줄간의 1/2 크기이다.

---

class="even-grid vgap00"

줄간격이 없으므로 2줄 이상 표현될 경우는 적당하지 않다.

---

Offsets

그리드 스타일에 .large-offset-1{margin-left:8.333%;} 형태의 스타일을 정의하지 않았음. 필요하면 <div class="large-3 column hide-all show-large"></div> 등을 추가하여 만들 수 있다.
단, 그리드 컬럼 래퍼는 class="even-grid float-left" 이어야 한다.

large-n column hide-all show-large

---

Incomplete Rows

그리드 스타일에 .end{float:right;} 형태의 스타일을 정의하지 않았음. 필요하면 .hide-all, .show-large 등을 이용하여 만든다.
단, 그리드 컬럼 래퍼는 class="even-grid float-left" 이어야 한다.

medium-3 column hide-all show-medium

---

Collapse/Uncollapse Rows

이거까지 하려면.. 스타일이 복잡해지므로.. 보류!

그리드 스타일에 .medium-collapse, .large-uncollapse 등의 스타일을 정의하지 않았음. 필요하면 스타일을 추가하여 만든다.

even-grid medium-collapse large-uncollapse

.even-grid 요소에 medium-uncollapse large-collapse 클래스가 있다면,
.column 요소에 대응하는 medium-6 large-6 클래스가 있어야 바르게 동작합니다.

<style>/*<![CDATA[*/
@media all and (min-width:640px){
	.even-grid.medium-collapse{margin:0;}
	.even-grid.medium-collapse>.column{padding:0;}
	.even-grid.float-left.medium-collapse>.column{float:left;margin:0;padding:0;}
}
@media all and (min-width:1000px){
	.even-grid.large-uncollapse{margin:1% -1%;}
	.even-grid.large-uncollapse>.column{margin:0 -.25em 0 0;padding:1%;}
	.even-grid.float-left.large-uncollapse{margin:1% -1%;}
	.even-grid.float-left.large-uncollapse>.column{margin:0;padding:1%;}
}
/*]]>*/</style>

---

Centered column

even-grid text-align-center-small text-align-left-large

---

Source Ordering

이거까지 하려면.. 스타일이 복잡해지므로.. 보류!

그리드 스타일에 .large-push-4, .large-pull-8 등의 스타일을 정의하지 않았음. 필요하면 스타일을 추가하여 만든다.

"large-8 large-push-4 column" "large-4 large-pull-8 column"

left 값이 이용된다.

<style>/*<![CDATA[*/
.even-grid>.small-push-2{left:16.666%;}
.even-grid>.small-push-7{left:58.333%;}
.even-grid>.small-pull-5{left:-41.666%;}
.even-grid>.small-pull-10{left:-83.333%;}
@media all and (min-width:640px){
	.even-grid>.medium-push-5{left:41.666%;}
	.even-grid>.medium-push-6{left:50%;}
	.even-grid>.medium-pull-6{left:-50%;}
	.even-grid>.medium-pull-7{left:-58.333%;}
}
@media all and (min-width:1000px){
	.even-grid>.large-push-3{left:25%;}
	.even-grid>.large-push-4{left:33.333%;}
	.even-grid>.large-pull-8{left:-66.666%;}
	.even-grid>.large-pull-9{left:-75%;}
}
/*]]>*/</style>