암시적 CSS 그리드의 모든 행/열에 그리드 항목을 확장하려면 어떻게 해야 합니까?

암시적 그리드에서 그리드 항목을 마지막 행/열까지 확장하기

문제: 그리드 항목을 처음부터 마지막까지 확장하는 방법 암시적 그리드의 행 또는 열. 행/열의 개수는 다음과 같습니다. 알 수 없음?

배경:

암시적 그리드는 내부 콘텐츠를 기반으로 자동으로 생성되는 여러 트랙이 있는 그리드입니다. 명시적인 그리드 정의가 없으면 존재하는 행/열 수를 결정하기가 어려워집니다.

현재 제한 사항:

안타깝게도 현재 CSS 그리드 사양에서는 그렇지 않습니다. 그리드 속성을 사용하여 암시적 그리드의 모든 행/열에 걸쳐 그리드 항목을 확장할 수 있습니다. 혼자.

대안:

• 절대 위치 지정: 다른 답변에서 제안한 것처럼 절대 위치 지정을 사용하면 위치와 크기를 정의할 수 있습니다. 그리드 레이아웃에 관계없이 요소의. 그러나 이 접근 방식은 그리드 기반 접근 방식에서 벗어납니다.

명시적 그리드에 대한 솔루션:

암시적 그리드에서는 확장 항목을 달성할 수 없지만 가능합니다. 명시적으로 이를 달성하려면 그리드.

음수 이해:

CSS 그리드 사양에서는 그리드 배치 속성에 음수를 사용할 수 있습니다. 양의 정수는 처음부터 계산되고 음의 정수는 끝부터 계산됩니다.

스패닝 그리드 항목:

그리드 항목을 첫 번째 열에서 마지막 열까지 확장하려면 명시적인 그리드인 경우 다음을 사용합니다.

grid-column: 1 / -1;

이는 그리드 항목이 첫 번째 열 줄에서 시작하고 마지막 열 줄에서 끝나야 함을 나타냅니다. 확장 행에도 동일한 개념이 적용됩니다.

참고:

이 방법은 그리드 템플릿 속성(행, 열 및 지역).

위 내용은 암시적 CSS 그리드의 모든 행/열에 그리드 항목을 확장하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!