grid(4) auto columns, auto rows

김동하·2020년 9월 9일
0

CSS

목록 보기
9/11

우연한 기회도 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-auto-flow

.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과 비슷한 기능이다.

profile
프론트엔드 개발

0개의 댓글