CSS 그리드의 마지막 행을 전체 행에 걸쳐 만들려면 어떻게 해야 합니까?

CSS 그리드의 마지막 행 채우기

CSS 그리드에서 일반적인 과제는 마지막 행의 항목이 전체 공간을 차지하도록 하는 것입니다. 열. 정확한 항목 수를 모르면 해결 방법이 어려워 보일 수 있습니다.

n번째 하위 및 n번째 마지막 유형 사용

이는 조합을 사용하여 달성할 수 있습니다. CSS 규칙: n번째 하위 및 n번째 마지막 유형. 이러한 규칙은 특정 상위 요소 내의 위치를 ​​기반으로 요소를 대상으로 합니다. 이러한 규칙을 사용하면 마지막 행에 있는 항목의 정렬 및 크기를 조정할 수 있습니다.

샘플 코드:

다음 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(3n-1) 및 nth-child(3n)는 내부 위치에 따라 대상 요소를 지정합니다. 그리드 컨테이너. 이러한 규칙은 가운데 및 오른쪽 열의 항목 스타일을 지정하는 데 사용됩니다.
• nth-child(3n-1):nth-last-of-type(1) 및 nth-child(3n-2):nth -last-of-type(1) 특히 마지막 행의 마지막 항목을 대상으로 하고 정렬 및 범위를 조정합니다.
• grid-column 속성은 이러한 마지막 항목의 열 범위를 제어하는 ​​데 사용됩니다. 항목이 전체 행을 채우도록 합니다.

위 내용은 CSS 그리드의 마지막 행을 전체 행에 걸쳐 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!