[CSS] Flex에서는 안되지만 Grid에서는 되는 것

개발을 하다 보면 같은 크기의 요소 여러 개를 한 화면에 보여줘야할 일이 있다. 흔히 스마트폰 갤러리 앱과 같은 모습으로 구현하게 되는데 이 때 대부분 display: flex 속성을 이용하여 정렬하게 된다. 그런데 한 줄에 정해진 갯수만 넣기 위해 flex-wrap 속성을 설정했을 때 마지막 줄이 예상과 다르게 동작하는 경우가 있다.

위의 이미지는 justify-content: space-evenly 속성을 지정한 상태다. 한 줄에 3개씩 정렬하려 했으나 요소의 갯수가 3의 배수로 떨어지지 않으면 마지막 줄이 이상하게 보인다. 마지막 줄만 속성을 다르게 (예를 들면 justify-content: start) 지정할 수 없을까란 생각에 구글링을 해보면 '마지막 줄만 정렬을 바꿀 수 없냐'는 질문이 수두룩하다. 하지만 결론은 결국 'Flex에서는 안된다'였다. 그런데 Grid 레이아웃을 쓰면 손쉽게 해결할 수 있다는 글을 보고 직접 시도해봤다.

.contentsList.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.contentsItem {
  width: 33%;
  height: 11rem;
  margin: -0.4rem;
  border: 1px solid white;
}

원래는 위의 코드와 같았는데, 아래와 같이 수정했다. grid-template-columns는 열을 어떻게 나눌 것인지 정하는 프로퍼티다. 여기서는 1fr 1fr 1fr로 설정했는데 fr은 fractional의 약자다. 즉, 각자 일정한 비율로 나눠가지라는 뜻이 된다. 모두 1fr이니 세 열이 모두 같은 폭을 가지게 될 것이다.

.contentsList.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 11rem;
  gap: 2px;
}
.contentsItem {}

그러면 짜잔! 깔끔하게 원하는대로 정렬이 된 모습을 볼 수 있다.

Flex도 Grid도 만능은 아니겠지만 이제 새로운 선택지를 알게 되었으니 앞으로는 어떤 레이아웃에서 안되는 기능을 다른 레이아웃에서 시도할 수 있게 된 것만으로도 큰 이득이었다.