grid-cols1 tailwind css 컴포넌트 크기 조정하기, 자동 줄바꿈 ✅ 적용 목적 grid-cols-4 속성으로 인해 컴포넌트가 고정되어 있었고 이로 인해 사용자 입장에서 보기 불편할 것 같다는 피드백을 받았다. css가 grid-cols-4로 고정되어있어서 브라우저 크기를 줄이면 컴포넌트가 계속 작아졌다. 이러한 점을 개선하기 위해 브라우저가 줄어들면 한 줄에 하나의 컴포넌트만 위치하게 만들고 자동줄바꿈 속성을 넣기로 계획했다. ✅ 적용 방법 grid grid-cols-1 md:grid-cols-4 md 사이즈 까지는 한 줄에 4개씩 배치하고 md 사이즈보다 작아지면 한 줄에 하나씩 배치하는 css 속성을 적용했다. 그리고 각 게시물 개별 단위로는 max-w-2xl 속성을 주어서 게시물의 최대 너비를 제한하였다. ✅ 코드 {dataList.map((data: any) .. 2023. 7. 25. 이전 1 다음