auto fill과 auto fit

auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

기본적인 그리드 레이아웃의 구조는 다음과 같다.

* {
    box-sizing: border-box;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 10px;
}

.grid > div {
    border: 1px solid rgb(0, 95, 107);
    border-radius: 5px;
}

여기에서 auto-fill과 auto-fit 프로퍼티를 넣어보며 어떠한 변화가 생기는지 확인해보자.

위의 코드에서 grid-template-columns 부분만 다음과 같이 수정해준다.

grid-template-columns: repeat(auto-fill, 100px);

위처럼 구현이 되는데, flex-box에서의 wrap 속성처럼 구현이 된다.
그것이 기본적인 auto-fill의 기능이다.

다시 한번 grid-template-columns 부분을 변경해주자.

 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

차이점이 느껴지는가? 위와 같은 경우는 브라우저의 사이즈가 늘어날 때 빈 공간이 생겼다가 새로운 박스를 위로 끌어올려 콜럼을 채웠다. 그런데 이번과 같은 경우는 박스의 사이즈가 조금씩 늘어나다가 밑의 박스를 위로 끌어올리면서 콜럼을 채운다. 이게 minmax의 유무의 차이이다.

이번에는 브라우저의 사이즈가 최대로 늘어났을 때의 화면을 봐보자.

위와 같이 브라우저의 남은 부분은 따로 채우지 않고 그리드의 사이즈대로 지키고 있는 모습을 볼 수 있다.

이와 다른 예로 다음 예시를 봐보자, 이는 1분 코딩님의 블로그에서 가져온 이미지이다.

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

auto-fill의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어간다.

그런데 만약 셀의 개수가 5개보다 모자라면, 밑과 같이 공간이 남게 된다.

이러한 경우, 남는 공간을 채우도록 하는 프로퍼티가 auto-fit이다.

다시 위의 브라우저 예시로 돌아가서 코드를 auot-fit으로 수정해본다.

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

보이는 것처럼 남은 공간을 각 그리드 박스의 width를 넓혀서 공간을 채운다.

밑의 주황색 그리드 박스의 예시도 다음과 같이 auto-fit을 사용하면 남은 공간을 모두 채우는 것을 확인할 수 있다.

.container {
	grid-template-columns: repeat(auto-fit, minmax(20%, auto));
}