우연한 기회도 20개의 box를 얻게 되었다. 여느 때와 같이 grid-template-columns: repeat(4, 100px)
과 grid-template-rows: repeat(4, 100px)
으로 살살 혼내주려고 했는데 문제가 발생했다.
17번부터 20번의 box가 전체 grid에 담기지 않는다.
만약 box가 40개가 된다면 이런 옳지 못한 상황이 발생한다. column은 4개는 grid-template-columns: repeat(4, 100px)
에 맞게 들어가는데 row를 지정하지 않은 것이다. 지정해야할 row가 많아지면 때마다 수정하기가 힘들 것이다. 그런 이유로 auto rows
를 사용한다.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
grid-auto-rows: 100px;
}
문제 해결.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
이렇게 columns과 rows가 다시 정의되었다. 아까로 돌아가 box가 20개 생겼을 때 column은 유지되고 (가로로 늘어나지 않고) row 만 생겨났다. row가 아닌 column으로 늘이고 싶을 때 grid-auto-flow: column
를 사용한다.
flex-direction
과 비슷한 기능이다.