CSS 그리드를 사용하여 상자를 왼쪽 정렬된 마지막 행으로 중앙에 배치하는 방법은 무엇입니까?

마지막 행이 왼쪽 정렬된 가운데 상자

동적 요소 목록을 처리할 때 마지막 행을 정렬하는 동시에 가운데 정렬을 달성하는 것이 어려울 수 있습니다. 왼쪽에 요소가 있습니다. text-align: center는 컨테이너 내에서 요소를 수평으로 정렬하지만 컨테이너의 너비는 고려하지 않습니다.

문제 해결

CSS Grid는 이 문제에 대한 솔루션을 제공합니다.

div {
  display: grid;
  justify-content: center;
}

• display: 그리드는 컨테이너를 그리드로 변환합니다. 레이아웃.
• justify-content: center 그리드의 내용을 수평으로 중앙에 배치합니다.

그러나 요소의 마지막 행이 왼쪽에 정렬되도록 하려면 Grid-template-columns를 사용하여 그리드의 열 수:

ul {
  grid-template-columns: repeat(auto-fit, 40px);
}

• repeat(auto-fit, 40px)은 콘텐츠에 맞게 필요한 만큼 많은 열을 생성하며 각 열의 너비는 40px입니다.

예:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

이 솔루션을 사용하면 목록의 요소 수에 관계없이 상자는 가로 중앙에 유지되고 마지막 행은 왼쪽에 정렬됩니다.

위 내용은 CSS 그리드를 사용하여 상자를 왼쪽 정렬된 마지막 행으로 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!