내 CSS 그리드 항목 높이가 상위 컨테이너 높이의 두 배가 되지 않는 이유는 무엇입니까?

CSS 그리드: 요소 높이 계산 혼란

CSS 그리드 요소, 특히 .gridItem의 높이 관련 문제가 발생했습니다. , 예상대로 계산되지 않습니다. 이 그리드 설정에서는:

.gridContainer {
  height: 100px;
  grid-template-rows: 1fr;
}

.gridItem {
  height: 200%;
}

.gridItem의 높이가 상위 항목인 .gridContainer의 두 배가 되도록 하는 것이 목표입니다. 그러나 결과는 자식 요소의 높이를 대신 고려한 것으로 보입니다.

CSS 그리드의 부모-자식 관계 이해

CSS 그리드로 작업할 때, 부모-자식 관계. 이 경우 .gridItem의 상위 요소는 .gridContainer가 아니라 이를 포함하는 그리드 트랙입니다.

grid-template-rows: 1fr;을 지정할 때 유연한 트랙을 생성합니다. 상위 항목의 사용 가능한 공간 중 1 분수 단위를 차지하는 높이입니다. 상위 트랙의 높이는 100px로 고정되어 있으므로 트랙의 높이는 100px이 됩니다.

따라서 .gridItem의 높이가 200%인 경우에도 상위 트랙의 높이인 100px를 나타냅니다. 이는 .gridItem의 높이가 상위 컨테이너 대신 트랙 높이의 두 배인 이유를 설명합니다.

수정: 컨테이너와 트랙 모두에 명시적 높이 설정

이 문제를 해결하려면 .gridContainer와 그리드 트랙 모두에 고정 높이를 지정해야 합니다. 이렇게 하면 명확한 상위-하위 관계가 설정되고 .gridItem의 높이 비율이 올바르게 작동할 수 있습니다.

.gridContainer {
  height: 100px;
  grid-template-rows: 100px;
}

.gridItem {
  height: 200%;
}

이 조정을 통해 이제 .gridItem의 높이는 예상대로 .gridContainer 높이의 두 배가 됩니다. .

위 내용은 내 CSS 그리드 항목 높이가 상위 컨테이너 높이의 두 배가 되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!