12개 길이 그리드

또 다른 대표적인 예로 12개 길이 그리드입니다. repeat() 함수를 사용하여 CSS에 그리드를 빠르게 작성할 수 있습니다. 그리드 템플릿 열에 repeat(12, 1fr);를 사용하면 각 1fr에 12개의 열이 제공됩니다.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

이제 12개의 열 트랙 그리드가 생겼으므로 그리드에 하위 요소를 배치할 수 있습니다. 한 가지 방법은 그리드 선을 사용하여 배치하는 것입니다. 예를 들어 grid-column: 1 / 13는 첫 번째 줄에서 마지막 줄 (13번째)까지 12개 열에 걸쳐 있습니다. grid-column: 1 / 5;는 처음 4개에 걸쳐 있습니다.

또 다른 방법은 span 키워드를 사용하는 것입니다. span를 사용하면 시작 줄을 설정한 다음 이 시작점부터 확장될 열 수를 설정합니다. 이 경우 grid-column: 1 / span 12은 grid-column: 1 / 13와 같고 grid-column: 2 / span 6는 grid-column: 2 / 8와 같습니다.

.child-span-12 {
  grid-column: 1 / span 12;
}

HTML

 <div class="parent">
  <div class="span-12 section coral">Span 12</div>
  <div class="span-6 section green">Span 6</div>
  <div class="span-4 section yellow">Span 4</div>
  <div class="span-2 section blue">Span 2</div>
</div>

CSS

        .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

/* centering text */
.section {
  display: grid;
  place-items: center;
  text-align: center
}