CSS 암시적 그리드
암시적 그리드는 요소의 수가 명시적 그리드에 맞지 않을 때 브라우저가 자동으로 생성합니다. 어떻게 발생하는지 살펴보겠습니다.
네 개의 블록이 있다고 가정해 보겠습니다:
<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로 가정해 보겠습니다:
#parent {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
}
세 개의 블록을 그리드에 배치해 보겠습니다:
#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;
}
우리 그리드의 크기가
3 x 3이기 때문에,
이 그리드에는 네 번째 행과 열이 명시적으로 존재하지 않습니다.
즉, 우리가 정의한 그리드에는 없습니다.
하지만 브라우저는 이를 암시적으로, 즉 스스로 생성할 것입니다.
이때, 우리는 명시적 그리드에 대해서만 크기를 지정했기 때문에, 이 그리드 외부에 있는 셀의 크기는 브라우저에 의해 계산될 것입니다. 즉, 우리의 경우 네 번째 블록의 크기는 브라우저에 의해 자동으로 설정될 것입니다.
결과가 어떻게 나오는지 살펴보겠습니다:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#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;
}
:
당신의 그리드에 6개의 블록이 있다고 가정합니다.
3개의 블록은 명시적 그리드에 배치하고,
세 개의 블록은 암시적 그리드에 배치하세요.
