3 Column Grid
Drakmoon UI Kit
Drakmoon UI Kit은 3개의 컬럼 그리드를 사용하는 레이아웃 입니다. 컬럼 사이에는 동일한 간격의 공간(gutters) 또한 가지고 있습니다.
물론 3 컬럼 그리드로 레이아웃을 구현할 수도 있습니다만, 앞서 다룬 12 컬럼 그리드 시스템을 활용할 수도 있습니다.
CSS Grid로 구현한 3컬럼 레이아웃
레이아웃에 초점을 두고 12컬럼 그리드 시스템을 활용하여 제작해 본 Darkmoon UI Kit 결과를 살펴볼 수 있습니다.
다소 복잡해보였던 레이아웃에 비해 구조를 이루는 마크업은 매우 간결합니다. 그리드 컨테이너와 나머지는 모두 그리드 아이템 입니다. 요구되는 레이아웃 위치에 배치하기 위한 그리드 시스템 클래스 속성을 추가합니다.
<div class="grid">
<div class="item col-8">Men’s style, Clothing</div>
<div class="item col-4">Photo</div>
<div class="item col-4 row-2">Latest News</div>
<div class="item col-8">Movies, Actors, Celebrities</div>
<div class="item col-4">What Makes a City</div>
<div class="item col-4">Home Decorating Ideas</div>
<div class="item col-8">Ultra NOIR</div>
<div class="item col-4 row-2">Alexander McQueen</div>
<div class="item col-8">Popular News</div>
<div class="item col-4">Horses & ponies</div>
<div class="item col-8">Summer 2016</div>
<div class="item col-4">Categories</div>
<div class="item col-4 row-2">Latest Comments</div>
<div class="item col-4 row-2">Calendar</div>
<div class="item col-4">Follow Us</div>
<div class="item col-4">Normandie Amenagement 20 years</div>
<div class="item col-4 row-2">VICTORINOX ARCHOTECTURE URBAN</div>
<div class="item col-4 row-2">The Food Field</div>
<div class="item col-4">Normandie Amenagement 20 years</div>
<div class="item col-4">GRAFIC DESING</div>
<div class="item col-4">PHOTO</div>
<div class="item col-4">photo by Alex Green</div>
<div class="item col-4">WANDERLUST LIP & EYE COLLECTION</div>
<div class="item col-4">WANDERLUST LIP & EYE COLLECTION</div>
<div class="item col-4">WANDERLUST LIP & EYE COLLECTION</div>
<div class="item col-3">Andrew Kos</div>
<div class="item col-3">The Kurieitā Movement</div>
<div class="item col-3">PHOTO</div>
<div class="item col-3">Spinnaker West</div>
<div class="item col-full">PAGENATION</div>
</div>12 컬럼 그리드 시스템을 사용하고 있기 때문에 최종적으로 완성 코드는 다음과 같이 나옵니다. 컬럼을 3개로 나눠 제작한다면 보다 코드가 간결 해질 수도 있습니다.
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 14rem repeat(9, 13rem) repeat(2, 11rem) 9rem 4rem;
grid-gap: 10px;
}
.grid .col-1 { grid-column-end: span 1; }
.grid .row-1 { grid-row-end: span 1; }
.grid .col-2 { grid-column-end: span 2; }
.grid .row-2 { grid-row-end: span 2; }
.grid .col-3 { grid-column-end: span 3; }
.grid .row-3 { grid-row-end: span 3; }
.grid .col-4 { grid-column-end: span 4; }
.grid .row-4 { grid-row-end: span 4; }
.grid .col-5 { grid-column-end: span 5; }
.grid .row-5 { grid-row-end: span 5; }
.grid .col-6 { grid-column-end: span 6; }
.grid .row-6 { grid-row-end: span 6; }
.grid .col-7 { grid-column-end: span 7; }
.grid .row-7 { grid-row-end: span 7; }
.grid .col-8 { grid-column-end: span 8; }
.grid .row-8 { grid-row-end: span 8; }
.grid .col-9 { grid-column-end: span 9; }
.grid .row-9 { grid-row-end: span 9; }
.grid .col-10 { grid-column-end: span 10; }
.grid .row-10 { grid-row-end: span 10; }
.grid .col-11 { grid-column-end: span 11; }
.grid .row-11 { grid-row-end: span 11; }
.grid .col-full { grid-column: 1 / 6; }크로스 브라우징 (IE)
IE 10+ 브라우저에서도 레이아웃이 무너지지 않고 올바르게 작동 시키려면 IE에서 적용 가능한 코드(-ms-)가 추가적으로 필요합니다. 다음 코드는 CSS Grid ProjectKit for IE 도구를 사용해 자동으로 생성된 것입니다.
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[12];
grid-template-columns: repeat(12, 1fr);
-ms-grid-rows: 14rem (13rem)[9] (11rem)[2] 9rem 4rem;
grid-template-rows: 14rem repeat(9, 13rem) repeat(2, 11rem) 9rem 4rem;
grid-gap: 10px;
}
.grid .col-1 {
-ms-grid-column-span: 1;
grid-column-end: span 1;
}
.grid .row-1 {
-ms-grid-row-span: 1;
grid-row-end: span 1;
}
.grid .col-2 {
-ms-grid-column-span: 2;
grid-column-end: span 2;
}
.grid .row-2 {
-ms-grid-row-span: 2;
grid-row-end: span 2;
}
.grid .col-3 {
-ms-grid-column-span: 3;
grid-column-end: span 3;
}
.grid .row-3 {
-ms-grid-row-span: 3;
grid-row-end: span 3;
}
.grid .col-4 {
-ms-grid-column-span: 4;
grid-column-end: span 4;
}
.grid .row-4 {
-ms-grid-row-span: 4;
grid-row-end: span 4;
}
.grid .col-5 {
-ms-grid-column-span: 5;
grid-column-end: span 5;
}
.grid .row-5 {
-ms-grid-row-span: 5;
grid-row-end: span 5;
}
.grid .col-6 {
-ms-grid-column-span: 6;
grid-column-end: span 6;
}
.grid .row-6 {
-ms-grid-row-span: 6;
grid-row-end: span 6;
}
.grid .col-7 {
-ms-grid-column-span: 7;
grid-column-end: span 7;
}
.grid .row-7 {
-ms-grid-row-span: 7;
grid-row-end: span 7;
}
.grid .col-8 {
-ms-grid-column-span: 8;
grid-column-end: span 8;
}
.grid .row-8 {
-ms-grid-row-span: 8;
grid-row-end: span 8;
}
.grid .col-9 {
-ms-grid-column-span: 9;
grid-column-end: span 9;
}
.grid .row-9 {
-ms-grid-row-span: 9;
grid-row-end: span 9;
}
.grid .col-10 {
-ms-grid-column-span: 10;
grid-column-end: span 10;
}
.grid .row-10 {
-ms-grid-row-span: 10;
grid-row-end: span 10;
}
.grid .col-11 {
-ms-grid-column-span: 11;
grid-column-end: span 11;
}
.grid .row-11 {
-ms-grid-row-span: 11;
grid-row-end: span 11;
}
.grid .col-full {
-ms-grid-column: 1;
-ms-grid-column-span: 5;
grid-column: 1 / 6;
}Last updated
