12 Column System

12 컬럼 그리드 시스템

12 컬럼 그리드는 웹 레이아웃을 구현하는 가장 대표적인 그리드 시스템입니다.

12 컬럼 그리드 시스템

CSS Grid를 사용해 재사용 가능한 12 컬럼 그리드를 구현할 수 있습니다. 완성된 그리드 시스템은 다음과 같습니다.

일정한 열 너비와 거터 간격만 설정하면 손쉽게 12 컬럼 그리드를 만들 수 있습니다.

.grid {
  display: grid;
  width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-right: 10px;
  padding-left: 10px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(5rem, auto);
  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 .col-12 {
  grid-column: 1 / -1;
}

HTML 요소에 설계한 12 컬럼 그리드를 적용해 레이아웃을 형성합니다.

<div class="grid">
  <!-- .col-1 -->
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <div class="item col-1">1</div>
  <!-- .col-2 -->
  <div class="item col-2">2</div>
  <div class="item col-2">2</div>
  <div class="item col-2">2</div>
  <div class="item col-2">2</div>
  <div class="item col-2">2</div>
  <div class="item col-2">2</div>
  <!-- .col-3 -->
  <div class="item col-3">3</div>
  <div class="item col-3">3</div>
  <div class="item col-3">3</div>
  <div class="item col-3">3</div>
  <!-- .col-4 -->
  <div class="item col-4">4</div>
  <div class="item col-4">4</div>
  <div class="item col-4">4</div>
  <!-- .col-5 -->
  <div class="item col-5">5</div>
  <div class="item col-2">2</div>
  <div class="item col-5">5</div>
  <!-- .col-6 -->
  <div class="item col-6">6</div>
  <div class="item col-6">6</div>
  <!-- .col-7 -->
  <div class="item col-7">7</div>
  <div class="item col-3">3</div>
  <div class="item col-2">2</div>
  <!-- .col-8 -->
  <div class="item col-8">8</div>
  <div class="item col-4">4</div>
  <!-- .col-9 -->
  <div class="item col-9">9</div>
  <div class="item col-2">2</div>
  <div class="item col-1">1</div>
  <!-- .col-10 -->
  <div class="item col-10">10</div>
  <div class="item col-2">2</div>
  <!-- .col-11 -->
  <div class="item col-11">11</div>
  <div class="item col-1">1</div>
  <!-- .col-full -->
  <div class="item col-full">12</div>
</div>