3 Column Grid

3 컬럼 레이아웃 디자인 | Darkmoon UI Kit

Drakmoon UI Kit

Drakmoon UI Kit은 3개의 컬럼 그리드를 사용하는 레이아웃 입니다. 컬럼 사이에는 동일한 간격의 공간(gutters) 또한 가지고 있습니다.

물론 3 컬럼 그리드로 레이아웃을 구현할 수도 있습니다만, 앞서 다룬 12 컬럼 그리드 시스템을 활용할 수도 있습니다.

12 컬럼 그리드를 사용하여 3 컬럼 레이아웃 디자인

CSS Grid로 구현한 3컬럼 레이아웃

레이아웃에 초점을 두고 12컬럼 그리드 시스템을 활용하여 제작해 본 Darkmoon UI Kit 결과를 살펴볼 수 있습니다.

다소 복잡해보였던 레이아웃에 비해 구조를 이루는 마크업은 매우 간결합니다. 그리드 컨테이너와 나머지는 모두 그리드 아이템 입니다. 요구되는 레이아웃 위치에 배치하기 위한 그리드 시스템 클래스 속성을 추가합니다.

12 컬럼 그리드 시스템을 사용하고 있기 때문에 최종적으로 완성 코드는 다음과 같이 나옵니다. 컬럼을 3개로 나눠 제작한다면 보다 코드가 간결 해질 수도 있습니다.

크로스 브라우징 (IE)

IE 10+ 브라우저에서도 레이아웃이 무너지지 않고 올바르게 작동 시키려면 IE에서 적용 가능한 코드(-ms-)가 추가적으로 필요합니다. 다음 코드는 CSS Grid ProjectKit for IE 도구를 사용해 자동으로 생성된 것입니다.

Last updated