문제
반응형으로 개발을 하면서 Grid를 사용해서 레이아웃을 만들었습니다. 1fr, 8 1프레임씩 8개의 칸으로 나누고 max-width 값을 1300px를 주었습니다. width의 경우 max 1300px을 주었기에 pc 화면에서는 문제가 없지만 모바일 화면에서 계속해서 width 값이 늘어나는 문제가 발생했습니다.
문제 화면

문제 코드
<!-- overflow-x-auto 값을 추가했습니다. -->
<div class="grid md:grid-cols-8 gap-4 min-h-72 mx-auto max-w-[1280px]">
<div class="col-span-8 md:col-span-8 lg:col-span-6">
.....
.....
<div class="overflow-x-auto hide-scrollbar md:flex-grow whitespace-nowrap text-xs md:text-sm flex flex-row justify-center items-center gap-x-8">
<a href="" class="text-blue-400 hover:text-blue-400">전체</a>
<a href="" class="hover:text-blue-400">카테고리1</a>
<a href="" class="hover:text-blue-400">카테고리2</a>
<a href="" class="hover:text-blue-400">카테고리3</a>
<a href="" class="hover:text-blue-400">카테고리4</a>
<a href="" class="hover:text-blue-400">카테고리5</a>
<a href="" class="hover:text-blue-400">카테고리6</a>
<a href="" class="hover:text-blue-400">카테고리7</a>
<a href="" class="hover:text-blue-400">카테고리8</a>
</div>
</div>
</div>
<!-- 자손 코드 overflow-x-auto가 제가 원하는 대로 동작하지 않습니다. -->
해결한 코드
- Grid 레이아웃을 만든 자식 아이템에게
overflow-x-auto을 사용해서 해결했습니다. 1fr의 늘어나는 문제를 자식에게overflow-x-auto사용하면서 1fr 단위가 화면에 고정할 수 있습니다.- 이후에 실제로 자신이 원하는 레이어에
overflow-x-auto적용 이후 자기 자신과 형제 노드들에게whitespace-nowrap를 사용해서 overflow로 인한 줄바꿈 문제를 해결할 수 있었습니다.
<div class="grid md:grid-cols-8 gap-4 min-h-72 mx-auto max-w-[1280px]">
<div class="col-span-8 md:col-span-8 lg:col-span-6 overflow-x-auto">
</div>
</div>
스크롤은 동작하지만 컨텐츠가 짤려서 보이는 문제가 발생했습니다.

- PC화면에서 flex justifyContent center를 통해서 아이템 값을 중앙 정렬하는 것이 모바일 화면에서도 적용되는 것이 문제였습니다.
- 반응형으로 pc일 경우에만 justifyContent가 동작하도록 수정했습니다.
<!-- justify-center => md:justify-center-->
<div class="relative overflow-x-auto hide-scrollbar md:flex-grow whitespace-nowrap text-xs md:text-sm flex md:justify-center flex-row items-center gap-x-8">
<!--TODO: Board 카테고리 만들고 진행해야합니다. -->
<a href="" class="text-blue-400 hover:text-blue-400">전체</a>
<a href="" class="hover:text-blue-400">카테고리1</a>
<a href="" class="hover:text-blue-400">카테고리1</a>
<a href="" class="hover:text-blue-400">카테고리1</a>
<a href="" class="hover:text-blue-400">카테고리2</a>
<a href="" class="hover:text-blue-400">카테고리3</a>
<a href="" class="hover:text-blue-400">카테고리3</a>
</div>
👏👏👏👏드디어 정상 동작!
