tailwind css 컴포넌트 크기 조정하기, 자동 줄바꿈

✅ 적용 목적

grid-cols-4 속성으로 인해 컴포넌트가 고정되어 있었고 이로 인해 사용자 입장에서 보기 불편할 것 같다는 피드백을 받았다.

css가 grid-cols-4로 고정되어있어서 브라우저 크기를 줄이면 컴포넌트가 계속 작아졌다.

이러한 점을 개선하기 위해 브라우저가 줄어들면 한 줄에 하나의 컴포넌트만 위치하게 만들고 자동줄바꿈 속성을 넣기로 계획했다.

 

✅ 적용 방법

grid grid-cols-1 md:grid-cols-4

md 사이즈 까지는 한 줄에 4개씩 배치하고 md 사이즈보다 작아지면 한 줄에 하나씩 배치하는 css 속성을 적용했다.

 

그리고 각 게시물 개별 단위로는 max-w-2xl 속성을 주어서 게시물의 최대 너비를 제한하였다. 

 

✅ 코드

<>
 <div className="grid grid-cols-1 gap-4 m-8 min-h-100 md:grid-cols-4 justify-items-center">
          {dataList.map((data: any) => {
            return (
              <>
               <div className="transition duration-150 h-full max-w-sm hover:ease-in-out hover:scale-110  relative group overflow-hidden  bg-white border border-gray-200 rounded-lg shadow ">
             // 중간코드 생략 //
               </div>
              </>
            );
          })}
   </div>
</>

 

✅ 적용 후기 

브라우저가 일정 크기보다 작아졌을때 게시물이 자동 줄바꿈되면서 한줄에 하나씩 배치되니까 보기가 더 편해졌다.

break-point를 사용해본적은 처음이여서 적용하는데 생각보다 시간이 많이 걸렸지만 직접 css 설정 바꿔보니 뿌듯하고 결과가 마음에 들었다. 

css 속성에 대해서 좀 더 자세히 알아봐야겠다는 생각이 들었다.  좀 더 내가 원하는 형태의 게시물 형식을 구현하고 싶다.