css) Grid layout Width 값이 늘어나는 문제 with tailwind css

문제

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

문제 화면

갤럭시 s8 화면에서 큰 문제점

문제 코드

<!-- 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>

👏👏👏👏드디어 정상 동작!

문제 해결

참고자료

Grid 가로폭 고정하는 방법
overflow-x 적용시 컨텐츠가 짤리는 현상