[NextJS] 반응형 디자인을 해보자!! - Grid편 (ft. tailwind CSS)

서론

 

여태까지 프로젝트에서 데스크탑 화면만 구성해봤지만, 사실 반응형 디자인은 어렵지 않다.

tailwind css나 mui 등을 사용할 때, 반응형 디자인을 쉽게 할 수 있게 지원해주기 때문에 그렇게 어렵진 않다.

 

이번엔 grid를 사용해서 반응형 디자인을 할건데, tailwind css를 사용해 보자.

 

계획

먼저, tailwind css에서 반응형 디자인은 어떻게 하는지 찾아보자.

 

sm, md, lg 등을 추가하는 것으로 반응형 디자인을 간단하게 설계할 수 있는데,

 

보통 width<= 500px정도가 모바일이고, 768px 근처가 태블릿,  1024부터 데스크탑 뷰라고 간단히 생각해도 된다.

 

그럼 이제 Grid로 어떻게 할까?

 

먼저 Grid를 알아보자.

 

가로를 기준으로 Grid Item들을 배치할 거면, grid-templates-columns 속성을 활용하면 된다.

간단하게 classname에 gird-cols-${배치할 숫자 개수}를 하면 된다.

 

 

만약 세로를 기준으로 Grid Item들을 배치할거면 grid-templates-rows 속성을 활용하면 된다.

 

 

나는 일단, 가로를 기준으로 배치할 것이기 때문에, grid-templates-columns 속성을 활용하겠다.

 

그리고 반응형 디자인을 생각했을 때, viewport 기준으로도 할 수 있고, %로도 할 수 있지만 일단 나는 간단하게 %를 기준으로 정했다.

 

먼저 배치되는 레이아웃(컨테이너)의 가로 크기를 생각했을 때, 와이드 모니터는 3000px정도의 크기가 될 수도 있다.

이런 모니터들을 생각했을 때, 대부분의 사이트들은 max-width에 제한을 두는 식으로 해결한다.

 

그래서 나는 일단 max-width를 1280px로 두었다.

margin: auto를 활용한 중앙 정렬과 뷰마다 양옆이 비게 만드는 조금의 픽셀값은 덤이다.

 

 

    <div className="px-[10px] lg:px-[40px] max-w-[1280px] m-auto">
    {콘텐츠}
    </div>

 

그리고 이제 직접 그리드를 설정하고, 그리드 아이템들을 배치해보자.

 

그리드 컨테이너를 이전에 만든 컨테이너에서 약간의 픽셀을 뺀 width의 100%로 두고, 생각해보자.

 

768과 1024를 기준으로 2개, 3개, 4개 일캐 배치하면 큰 변화 없이 배치할 수 있다.

 

다음과 같이 테일윈드 CSS를 활용하면 반응형 디자인을 한 컨테이너를 만들 수 있다.

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 w-[100%]">
        {Array.from(Array(8), (_, index) => (
          <콘텐츠 컴포넌트 />
        ))}
      </div>

 

 

결과

 

반응형

쉽게 완성!!