Tailwind CSS를 사용하여 그리드에서 항목의 마지막 행을 중앙에 배치하는 방법은 무엇입니까?

Question

<p>Tailwind(React 사용)를 사용하여 최종 프로젝트를 그리드 레이아웃에 정렬하는 데 문제가 있습니다. 기본적으로 나는 3개의 항목을 원하고 3개의 항목이 남지 않은 경우(예: 2개 또는 1개)를 중앙에 배치하고 싶습니다. </p> <p>일종의 열 범위를 시도했지만 예상대로 작동하지 않았습니다. </p> <p>제가 하려는 작업을 더 잘 설명하기 위해 몇 가지 다이어그램을 첨부했습니다</p> <p>현재 레이아웃: </p> <p>2개 항목이 남아 있는 원하는 레이아웃: </p> <p>원하는 레이아웃, 남은 항목 1개: </p> <pre class="brush:html;toolbar:false;"><div className="xl:grid Grid-cols-3 gap-4"> //카드 .map(항목) </div>

Answer 1

사용을 고려해볼 수 있습니다flex、flex-wrap、justify-center

7개 항목:

으아악

출력:

8개 항목:

으아악

tailwind-css Playground

사용