CSS 그리드의 마지막 행/열까지 그리드 항목을 확장하려면 어떻게 해야 합니까?

암시적 그리드에서 그리드 항목을 마지막 행/열까지 확장할 수 있나요?

CSS 그리드에서는 그리드 항목을 다음 행/열까지 확장할 수 있습니다. 음의 정수를 사용하는 명시적 그리드의 마지막 행/열. 그러나 이 기술은 암시적 그리드에는 작동하지 않습니다.

암시적 그리드

암시적 그리드에는 행과 열의 수가 고정되어 있지 않으므로 불가능합니다. 마지막 행/열까지 범위를 직접 지정합니다. 예를 들어 행 수를 알 수 없는 다음 그리드를 생각해 보세요.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
  grid-template-rows: auto [last-line];
}

암시적 그리드의 스패닝

항목을 처음부터 마지막까지 확장하려면 암시적 그리드의 행에서는 절대 위치 지정을 사용할 수 있습니다. 이 예에서는 세 번째 상자를 다른 상자 위에 배치한 다음 행을 확장하는 것처럼 보이도록 아래쪽으로 오프셋합니다.

.box:nth-child(3) {
  background-color: yellow;
  position: relative;
  top: calc(-100vh + 20px);
  grid-column: last-col / span 1;
  grid-row: 1 / last-line;
}

명시적 그리드

행과 열이 명시적으로 정의된 명시적 그리드에서는 음수를 사용하여 마지막 행/열까지 확장할 수 있습니다. 아래 그림은 다음과 같습니다.

.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}

.item {
  grid-column: 2 / -2;
  grid-row: 2 / -2;
}

이 예에서 .item 요소는 그리드의 두 번째 열과 행 전체에 걸쳐 있습니다.

결론

CSS 그리드는 암시적 그리드의 마지막 행/열까지 확장하는 직접적인 방법을 제공하지 않지만 절대 그리드를 사용하여 이를 달성할 수 있습니다. 포지셔닝. 그러나 명시적 그리드에서는 이 목적으로 음의 정수를 사용할 수 있습니다.

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