그리드 (Grid)

'CSS 그리드(grid)'는 display 속성의 grid 값을 사용하여 정의됩니다. grid-template-rows 및 grid-template-columns 속성을 사용하여 그리드의 열과 행을 정의할 수 있습니다.

이러한 속성을 사용해 정의하는 그리드는 '명시적 그리드'라고 할 수 있습니다.

이 명시적 그리드 외부에 콘텐츠를 배치하거나 자동 배치에 의존하고 그리드 알고리즘이 그리드 요소들을 보관하기 위해 추가 행 또는 열 트랙을 생성해야 하는 경우, 그러면 암시적 그리드에 추가 트랙이 생성됩니다.'암시적 그리드'는 정의된 트랙 외부에 추가되는 콘텐츠로 인해 자동으로 생성되는 그리드입니다.

아래 예제에서는 3개의 열과 2개의 행으로 구성된 '명시적 그리드'를 만들었습니다. 그리드의 '세 번째' 행은 '암시적 그리드' 행 트랙으로, 명시적 트랙을 채우는 6개 항목보다 많기 때문에 형성됩니다.

예제

css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

같이 보기