Tailwind CSS와 React를 사용하여 앱을 만들고 있는데 뷰 중 하나에 카드 그리드가 있습니다. 현재는 다음과 같습니다:
보시다시피 창을 축소하면 카드가 창 안으로 쏙 들어갑니다. 카드 크기(너비 및 높이)가 항상 동일하게 유지되도록 하고 창이 작아지면서 카드 수가 한 행에 맞지 않으면 다음 행으로 이동하도록 하고 싶습니다.
(MS 그림판으로 제작)과 유사:
화면이 작아져도 카드 크기는 고정(동일한 화면비)으로 유지됩니다.
현재 내 코드는 다음과 같습니다.
그리드:
으아아아카드:
으아아아tailwind-css를 사용하여 설정하는 방법을 알고 계시나요?
P粉0984172232024-03-27 18:30:06
Grid를 사용하여 설정하고 싶다는 것을 알고 있지만 불행히도 작업에 적합한 도구는 아닙니다. Flexbox는 귀하의 요구에 가장 적합합니다. 원하는 출력을 표시하는 tailwind 놀이터입니다. 내가 링크한 놀이터는 귀하의 예와 같이 NextJS를 사용하지 않습니다. 따라서 이미지와 같은 일부 항목은 NextJS에만 국한되지 않기 때문에 수정했습니다.
더 효과적이라고 생각되는 스타일을 일부 수정했습니다. 즉, 너비 설정을 이미지에서 컨테이너 div로 옮겼습니다. 요구 사항에 따라 이 설정을 추가로 수정할 수 있습니다.
설정에서 코드는 대략 다음과 같이 변환됩니다.
으아아아다음과 같습니다:
크기 및 포장 변경이 발생하는 정확한 지점은 구현 방법에 따라 다릅니다. 위 사항이 만족스럽지 않다면 필요에 따라 lg、md 접두사를 간단히 수정할 수 있습니다.