내 200% 높이 그리드 항목이 상위 컨테이너를 채우지 못하는 이유는 무엇입니까?

그리드 요소 높이 계산

질문:

CSS 그리드 레이아웃에서 그리드 항목의 높이가 200%로 설정되어 있지만 상위 컨테이너에 맞게 확장되지 않습니다. 키. 대신 하위 요소의 높이가 유지됩니다. 왜 이런 일이 발생합니까?

답변:

그리드 요소의 높이 계산은 그리드 구조 내의 위치에 따라 결정됩니다. 그리드 항목의 부모는 컨테이너가 아니라 해당 항목이 있는 트랙입니다.

이 경우 컨테이너 높이는 100px로 고정되지만 행 높이는 유연한 길이 단위인 1fr로 설정됩니다. . 결과적으로 그리드 항목의 높이 백분율(200%)은 트랙 높이에 상대적이므로 항목이 트랙을 수직으로 확장할 수 있습니다.

해결책:

그리드 항목이 컨테이너 높이에 맞게 확장되도록 하려면 행 높이도 고정해야 합니다. 행 높이를 컨테이너 높이와 동일한 값(예: Grid-template-rows: 100px)으로 설정하면 그리드 항목의 높이 백분율이 컨테이너 높이를 기준으로 올바르게 계산됩니다.

.gridContainer {
  grid-template-rows: 100px; /* Adjustment; previously set to 1fr */
}

이 조정을 통해 그리드 항목은 이제 컨테이너의 전체 높이를 차지하며 넘친 내용은 스크롤 막대에 의해 숨겨집니다.

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