# 3 Column Grid

![](/files/-LHLN30IORc97kR_-cAe)

![](/files/-LHMnF9xsKjuI7tmDEn_)

{% embed url="<https://www.ui8.net/products/darkmoon-ui-kit>" %}
3 컬럼 레이아웃 디자인 | Darkmoon UI Kit
{% endembed %}

## Drakmoon UI Kit

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

![](/files/-LHMmwlfKuGu49gMbz1M)

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

![12 컬럼 그리드를 사용하여 3 컬럼 레이아웃 디자인](/files/-LHNlHDuJAjOu0JNHlVe)

## CSS Grid로 구현한 3컬럼 레이아웃 <a href="#css-grid-3-columns-layout" id="css-grid-3-columns-layout"></a>

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

{% embed url="<https://codepen.io/yamoo9/pen/oeQxyK>" %}

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

```markup
<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개로 나눠 제작한다면 보다 코드가 간결 해질 수도 있습니다.

```css
.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](/css-grid/css-grid-for-ie.md#projectkit) 도구를 사용해 자동으로 생성된 것입니다.

```css
.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;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/css-grid/css-grid-layout-usage-guide/symmetrical-grid-layout/3-column-grid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.