CSS 암시적 그리드

암시적 그리드는 요소의 수가 명시적 그리드에 맞지 않을 때 브라우저가 자동으로 생성합니다. 어떻게 발생하는지 살펴보겠습니다.

네 개의 블록이 있다고 가정해 보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem3">4</div>
</div>

우리 그리드의 크기를 3 x 3로 가정해 보겠습니다:

css#parent {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
}

세 개의 블록을 그리드에 배치해 보겠습니다:

css#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

그리고 네 번째 블록을 네 번째 행과 열에 배치해 보겠습니다:

css#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

우리 그리드의 크기가 3 x 3이기 때문에, 이 그리드에는 네 번째 행과 열이 명시적으로 존재하지 않습니다. 즉, 우리가 정의한 그리드에는 없습니다. 하지만 브라우저는 이를 암시적으로, 즉 스스로 생성할 것입니다.

이때, 우리는 명시적 그리드에 대해서만 크기를 지정했기 때문에, 이 그리드 외부에 있는 셀의 크기는 브라우저에 의해 계산될 것입니다. 즉, 우리의 경우 네 번째 블록의 크기는 브라우저에 의해 자동으로 설정될 것입니다.

결과가 어떻게 나오는지 살펴보겠습니다:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}
#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

Результат: