CSS Grid를 반응형으로 사용할 수 있을까: auto-fit, auto-fill

개발중인 MODIMOA는 할인 정보 종합 서비스이기 때문에 상품 리스트를 제공해줘야 한다.

리스트에는 Infinite Scroll은 적용되어 있고, 최근 리스트의 레이아웃을 어떻게 해야할지 고민이 들었다.

 

내가 생각한 리스트 레이아웃의 조건은 다음과 같다.

1. 상품이 잘려서 보여서는 안된다.
2. 상품 간의 간격이 일정해야 한다.
3. 리스트를 하나로 봤을 때, 좌우 여백이 동일해야 한다. (가운데에 있어야 한다.)
4. 마지막 줄의 상품들은 개수가 꽉 안차더라도 윗줄과 배치 간격이 같아야 한다.
5. 창 너비에 따라 리스트의 열 개수가 변해야 한다. (반응형)

 

만약 flex, flex-wrap, justify-content, gap 속성을 적절히 조합해서 사용한다면 1, 2, 3, 5번은 해결할 수 있으나, 4번이 문제가 되고, grid를 사용한다면 5번이 문제가 된다고 생각했다. grid는 열 개수가 고정된다고 생각했기 때문이다.

 

flex로 구현했을 때, 4번이 해결되지 않는다.

grid로 열 개수를 고정하게 되면 화면 너비가 아무리 넓어도 한 줄에 보이는 상품 개수가 얼마 없게 돼 그거는 그거대로 마음에 들지 않는 UI를 제공한다.

 

그러나, grid에 열 개수를 고정하지 않을 수 있는 속성이 있었다. 그것이 auto-fit과 auto-fill이었다.

 

사용 방법은 다음과 같다.

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 12rem);
  justify-content: space-evenly;
  gap: 1rem;
}

 

grid-template-columns 속성에 사용하는 repeat() 함수는 첫번째 인자가 열 개수, 두번째 인자가 너비다.

auto-fit과 auto-fill은 둘 다 첫번째 인자에 위치해서 열 개수를 셀 너비와 그리드 너비에 따라 자동으로 조정할 수 있게 해준다.

 

처음에 auto-fit만 알게 되어서 이것저것 찾아보다가 auto-fill을 알게 되었는데, 이 둘도 큰 차이가 있었다.

둘의 차이는 셀들이 한 행에 모두 표시가 될 때 나타난다.

 

좌: auto-fit / 우: auto-fill

이렇게 리스트의 너비가 널널한데 셀 개수가 충분하지 않다면 auto-fit은 남은 여백을 하나의 여백 덩어리로 취급하는 반면, auto-fill에서는 남은 여백에도 빈 셀을 채워놓고 있었다.

 

위 사진은 확실히 차이를 보기 위해 justify-content 속성이 space-evenly로 되어있던 것을 해제한 상태이고, 해당 속성을 적용하면 아래와 같아진다.

 

좌: auto-fit / 우: auto-fill

그러면 이런 상품 팜플렛과 같은 레이아웃에는 auto-fit과 auto-fill 중 어떤 것을 적용해야 할까?

나는 auto-fill을 선택했다.

상품 개수가 많든 적든 간격은 항상 일정한 게 보기 좋다고 생각했기도 했고,

이 둘의 차이를 보기 위해서는 검색된 상품의 개수가 한 행에 표시될 만큼 굉장히 적어야하는데, 상품들이 같은 간격으로 너비 전체를 모두 사용할 때보다는 왼쪽에 몰려 있는 것이 상품이 적다라는 메시지를 조금 더 잘 전달할 수 있다고 생각했다.

 

Can I Use를 통해 IE를 제외하면 요즘 사용하는 대부분의 브라우저에서 적용이 되는 것을 확인하였다.

만약 grid가 없었다면 어떻게 해야했을까.

<tb>를 만들고 CSS가 아닌 JS로 너비값과 서버로부터 한 번에 가져오는 상품 개수를 계산해 <tr>마다 셀을 배치해야했을 것 같다.

 

CSS 최고!