CSS 그리드의 마지막 행에 항목을 균등하게 배포하는 방법은 무엇입니까?

CSS 그리드: 마지막 행 항목을 균등하게 배포

웹 디자인을 하다 보면 그리드 내에서 항목을 균등하게 배포해야 하는 경우가 종종 발생합니다. 특히 마지막 행의 레이아웃. 이 작업은 n번째 자식 규칙과 n번째 마지막 유형 규칙을 결합하여 쉽게 수행할 수 있습니다. 그러나 이 방법의 전제 조건은 그리드의 열 수를 아는 것입니다.

다음 마크업을 고려하세요.

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

그리고 다음 CSS 규칙도 함께 사용하세요.

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

이 예에서는 그리드가 세 개의 열로 정의되어 있으며 nth-child 및 n번째 마지막 유형입니다. 시각적 효과를 보여주기 위해 테두리가 추가되었습니다.

nth-child(3n-1):nth-last-of-type(1) 또는 nth-child(3n-2)에 적용되는 CSS 규칙: nth-last-of-type(1)은 두 번째 열과 세 번째 열의 마지막 항목이 각각 2개 또는 3개 열에 걸쳐 있고 미학적으로 행의 나머지 공간을 차지하도록 보장합니다.

위 내용은 CSS 그리드의 마지막 행에 항목을 균등하게 배포하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!