그리드 항목이 암시적 CSS 그리드의 마지막 셀까지 확장될 수 있습니까?

암시적 그리드의 마지막 그리드 셀까지 그리드 항목을 확장할 수 있나요?

그리드 레이아웃은 일반적으로 콘텐츠를 행과 열로 구성하는 데 사용됩니다. 일부 시나리오에서는 표의 행이나 열 수에 관계없이 항목이 여러 행이나 열에 걸쳐 있는 것이 바람직할 수 있습니다. 그러나 이는 행과 열의 수가 명시적으로 정의되지 않은 암시적 그리드를 사용할 때 문제가 될 수 있습니다.

제공된 예에서 컨테이너에는 암시적 그리드에 배열된 동적 개수의 상자가 포함되어 있습니다. 작업은 첫 번째 그리드 선에서 마지막 그리드 선까지 세 번째 상자 범위를 만드는 것입니다. 간단한 그리드 솔루션으로 충분해 보일 수 있지만 CSS 그리드 레벨 1 사양은 현재 이러한 솔루션을 지원하지 않습니다.

그러나 다른 참조에서는 절대 위치 지정을 사용한 해결 방법을 제안합니다.

명시적 그리드의 문제 해결

암시적 그리드에서는 셀 간 확장이 불가능합니다. 그리드의 경우 그리드-템플릿-행, 그리드-템플릿-열 및 그리드-템플릿-영역과 같은 속성을 사용하여 정확한 행과 열 수가 정의되는 명시적 그리드에서 달성할 수 있습니다.

에 따르면 CSS 그리드 사양에 따라 음수를 사용하여 명시적 그리드의 끝 가장자리부터 계산할 수 있습니다. 이 기능을 활용하면 원하는 동작을 달성할 수 있습니다.

grid-column: 3 / -1;

이 구문은 세 번째 열 줄부터 마지막 ​​열 줄까지 그리드 영역을 확장합니다. 마찬가지로 다음은 첫 번째 열 행에서 세 번째 열 행까지 확장됩니다.

grid-column: 1 / -3;

이 접근 방식은 특정 행 및 열 개수가 정의된 명시적 그리드에만 적용할 수 있다는 점에 유의하는 것이 중요합니다.

위 내용은 그리드 항목이 암시적 CSS 그리드의 마지막 셀까지 확장될 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!