더 나은, 간단한 그리드 시스템
대부분의 그리드 시스템은 float 혹은 inline-block 레이아웃 방식을 사용합니다. 하지만 이 방법들은 모두 실제로 레이아웃을 위해 사용되도록 의도된 방법이 아닙니다. 그 결과로, 꽤 중요한 문제와 한계를 가집니다.
float는 많은 레이아웃 문제를 가지고 있기 때문에 클리어(clear)하는 것이 요구됩니다. 가장 악명높은 문제는 요소를 클리어 했을 때 가끔 페이지 내 상관없는 부분 아래로 강제로 이동되는 것입니다. (예를 들어, 이 Bootstrap issue를 참고하세요.) 게다가, float된 요소를 클리어하는 것은 대개 앞 뒤로 가상 요소(pseudo-element)를 필요로 하며, 이는 다른 용도로 사용할 수 없습니다.
Inline block 레이아웃은 inline-block 사이의 공백 문제를 해결해야 합니다. 더구나 이 문제에 대한 모든 해결방법은 더럽거나 성가십니다.
Flexbox는 이러한 문제를 해결할 뿐만 아니라, 완전히 새로운 가능성의 세상을 열었습니다.
Flexbox 그리드 시스템의 기능
그리드 시스템은 종종 수 많은 크기 옵션을 제공합니다. 하지만 대다수의 경우 두 세개의 요소를 나란히 배치하기만 하면 됩니다. 그렇다면, 왜 우리는 모든 각각의 셀(Cell)에 크기를 지정하는 클래스를 필요로 해야할까요?
아래의 리스트는 이상적인 그리드 시스템에 대한 저의 기준입니다. 다행히도, Flexbox를 사용하면 이러한 기능의 대부분을 아주 쉽게 구현할 수 있습니다.
- 같은 행에 있는 그리드 셀은 기본 값으로 같은 너비 및 높이를 가집니다. 기본적으로 크기가 공간에 들어맞습니다.
- 보다 세밀한 제어를 위해, 각각의 셀에 크기를 지정하는 클래스를 추가할 수 있습니다. 이러한 클래스가 없다면, 각 셀은 원래처럼 빈 공간을 알아서 나눕니다.
- 반응형 그리드를 위해, 미디어 쿼리 관련 클래스를 셀에 추가할 수 있습니다.
- 각각의 셀은 수직적으로 상단, 하단 및 중단으로 정렬할 수 있습니다.
- 그리드 내의 모든 셀에 동일한 크기나 미디어, 정렬 값을 지정하기 위해서 불필요한 반복을 하지않고, 컨테이너에 하나의 클래스를 추가하기만 하면 됩니다.
- 그리드는 원하는 만큼 깊게 중첩될 수 있습니다.
기본 그리드
아래 그리드 셀은 어떠한 너비값도 지정받지 않았습니다. 자연스럽게 스스로 같은 공간을 가지고 행 전체로 확장되었습니다. 또한 기본적으로 높이 값이 같습니다.
개별 사이징
모두 같은 너비를 가지는 것을 원하지 않는다면, 각각의 셀에 크기를 지정하는 클래스를 추가할 수 있습니다. 사이즈를 지정하는 클래스가 없는 셀들은 간단히 원래대로 남은 공간을 나누어 가집니다.
"auto"이라는 단어가 붙은 셀은 사이즈를 지정하는 클래스가 없는 셀입니다.
반응형
반응형 그리드는 그리드 셀 혹은 컨테이너에 미디어 클래스를 추가함으로서 동작합니다. 이러한 미디어 값이 충족되면 그리드는 자동적으로 적절히 조정됩니다.
아래에 있는 셀들은 기본적으로 꽉찬 너비를 가져야하고 48em 이상에 맞춰 확장됩니다. 실제 동작을 보기 위해서 브라우저 크기를 조절해보세요.
Grid-ception
그리드 컴포넌트끼리 무한으로 중첩할 수 있습니다.
정렬 기능
그리드 셀 상단 정렬
그리드 셀 하단 정렬
그리드 셀 수직 중앙 정렬
수직 정렬 섞기
HTML
<div class="Grid">
<div class="Grid-cell">…</div>
<div class="Grid-cell">…</div>
<div class="Grid-cell">…</div>
</div>
CSS
기본 그리드 스타일
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
그리드 스타일 수정자(modifier)
/* With gutters */
.Grid--gutters {
margin: -1em 0 0 -1em;
}
.Grid--gutters > .Grid-cell {
padding: 1em 0 0 1em;
}
/* Alignment per row */
.Grid--top {
align-items: flex-start;
}
.Grid--bottom {
align-items: flex-end;
}
.Grid--center {
align-items: center;
}
/* Alignment per cell */
.Grid-cell--top {
align-self: flex-start;
}
.Grid-cell--bottom {
align-self: flex-end;
}
.Grid-cell--center {
align-self: center;
}
반응형 수정자 (모바일 퍼스트 접근)
/* Base classes for all media */
.Grid--fit > .Grid-cell {
flex: 1;
}
.Grid--full > .Grid-cell {
flex: 0 0 100%;
}
.Grid--1of2 > .Grid-cell {
flex: 0 0 50%
}
.Grid--1of3 > .Grid-cell {
flex: 0 0 33.3333%
}
.Grid--1of4 > .Grid-cell {
flex: 0 0 25%
}
/* Small to medium screens */
@media (min-width: 24em) {
.small-Grid--fit > .Grid-cell {
flex: 1;
}
.small-Grid--full > .Grid-cell {
flex: 0 0 100%;
}
.small-Grid--1of2 > .Grid-cell {
flex: 0 0 50%
}
.small-Grid--1of3 > .Grid-cell {
flex: 0 0 33.3333%
}
.small-Grid--1of4 > .Grid-cell {
flex: 0 0 25%
}
}
/* Large screens */
@media (min-width: 48em) {
.large-Grid--fit > .Grid-cell {
flex: 1;
}
.large-Grid--full > .Grid-cell {
flex: 0 0 100%;
}
.large-Grid--1of2 > .Grid-cell {
flex: 0 0 50%
}
.large-Grid--1of3 > .Grid-cell {
flex: 0 0 33.3333%
}
.large-Grid--1of4 > .Grid-cell {
flex: 0 0 25%
}
}
이 데모에서 쓰인 그리드 컴포넌트의 전체 소스 코드는 GitHub에서 보실 수 있습니다.