CSS 그리드의 마지막 행 항목이 사용 가능한 공간을 균등하게 채우도록 하려면 어떻게 해야 합니까?

그리드 마지막 행의 항목을 강제로 공간 채우기

수에 관계없이 CSS 그리드의 마지막 행에 항목을 고르게 배포하려면 항목의 경우 다음 접근 방식을 고려하세요.

레이아웃을 조작하기 위해 그리드의 항목 수를 결정하는 것이 과제입니다. 이는 사전에 알려지지 않을 수 있으므로 CSS는 n번째 하위 및 n번째 마지막 유형 선택기를 사용하여 솔루션을 제공합니다. 작동 방식은 다음과 같습니다.

1. 마지막 행 항목 식별: n번째 마지막 유형을 사용하여 마지막 행 항목을 선택합니다. 예를 들어, 그리드 > *:nth-last-of-type(1)은 마지막 행의 모든 ​​항목을 대상으로 합니다.
2. 왼쪽 최종 항목 배포: 가장 왼쪽 항목을 중앙에 배치하려면 justify-self: center를 사용합니다. . 두 번째 항목의 경우 justify-self: end를 사용하여 오른쪽에 정렬합니다. 이러한 스타일은 세 번째 항목마다 적용할 수 있습니다(예: 그리드 > *:nth-child(3n-1) 및 그리드 > *:nth-child(3n-2)).
3. 마지막 항목 범위 조정: 행의 마지막 항목에 대해 나머지 공간 전체에 걸쳐 있기를 원합니다. 이를 달성하려면 그리드의 열 수에 따라 그리드-열: 범위 2 또는 그리드-열: 범위 3을 사용하십시오(예: 3열 그리드의 경우 그리드 > *:nth-child(3n). -1):nth-last-of-type(1) {grid-column:span 2 }).

이를 결합하여 기술을 사용하면 그리드의 마지막 행에 있는 모든 항목이 개수에 관계없이 사용 가능한 공간을 균등하게 사용하도록 할 수 있습니다.

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