3 Column Grid

Darkmoon UI KitUI8

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

Drakmoon UI Kit

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

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

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

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 &amp; 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 &amp; EYE COLLECTION</div>
  <div class="item col-4">WANDERLUST LIP &amp; EYE COLLECTION</div>
  <div class="item col-4">WANDERLUST LIP &amp; 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;
}