CSS 그리드의 마지막 행 항목이 남은 공간을 채우도록 하려면 어떻게 해야 합니까?

CSS 그리드에서 마지막 행 간격 제어

도전과제:

마지막 행의 모든 ​​항목이 공백으로 표시되도록 하려면 어떻게 해야 합니까? CSS 그리드는 그 내용에 관계없이 행의 나머지 공간을 소비합니다. 번호?

해결책:

CSS 그리드의 기능을 활용하면 n번째 하위 항목과 n번째 마지막 항목의 영리한 조합을 통해 이러한 공간 제어를 달성할 수 있습니다. 유형 규칙. 핵심은 그리드의 열 수를 미리 아는 것입니다.

구현:

1. display:grid를 사용하여 그리드를 정의하고 원하는 열 수를 지정합니다. 그리드 템플릿 열이 있는 열.
2. justify-items: start 속성을 적용하여 항목을 정렬합니다. 행.
3. *:nth-child(3n-1)를 사용하여 특정 속성(예: 텍스트 중앙 정렬)으로 각 행의 첫 번째 항목 스타일을 지정합니다.
4. *:nth-child 사용 (3n) 각 행의 두 번째 항목 스타일을 지정합니다(예: 텍스트 오른쪽 정렬).
5. 각 행의 마지막 항목에 대해 결합 *:nth-child(3n-1)와 nth-last-of-type(1)을 사용하여 원하는 스패닝 동작을 달성합니다.
6. 테두리 지정과 같이 마지막 행의 모양을 사용자 정의하는 추가 규칙을 추가합니다. 또는 배경색.

예 코드:

.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;
}

HTML 예:

<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 속성을 활용하여 항목 간격을 효과적으로 제어할 수 있습니다. CSS 그리드의 마지막 행으로 미적으로 보기 좋고 유연한 레이아웃을 보장합니다.

위 내용은 CSS 그리드의 마지막 행 항목이 남은 공간을 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!