내 그리드 항목의 백분율 높이가 예상대로 작동하지 않는 이유는 무엇입니까?

부모 높이의 백분율로 계산할 때 그리드 요소 높이가 실패하는 이유

CSS 그리드의 높이 계산은 특히 백분율을 사용할 때 혼란스러울 수 있습니다. 제공된 예에서 그리드 항목의 높이는 200%로 설정되어 있지만 컨테이너 높이의 두 배는 아닙니다.

그리드 계층 구조 이해

그리드 항목은 컨테이너 내에 포함된 트랙 내에 있습니다. 따라서 그리드 항목의 상위 항목은 컨테이너가 아닌 트랙입니다.

백분율 높이 및 그리드 구조

그리드 행의 높이가 고정된 길이 단위(예: px) 또는 사용 가능한 공간의 일부(예: 1fr)로 계산된 경우 그리드 항목의 높이 백분율이 실패합니다. 이 경우 그리드 항목의 높이는 기본적으로 자동으로 설정되어 필요에 따라 효과적으로 행을 확장할 수 있습니다.

컨테이너 및 행 높이 설정

그리드 요소의 높이를 보장하려면 높이는 컨테이너의 높이를 기준으로 하며, 컨테이너와 행 모두에 고정 높이를 설정합니다. 제공된 코드에서는 컨테이너 높이가 100px인데 행 높이가 1fr로 설정되어 있습니다. 행 높이를 100px로 변경하면 그리드 항목의 200% 높이가 컨테이너 높이의 두 배가 됩니다.

업데이트된 예:

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

.gridItem {
  // ...
  overflow: auto;
}

행 높이가 컨테이너 높이와 일치하면 이제 그리드 항목의 높이가 예상대로 작동하여 컨테이너 높이를 두 배로 늘리고 내부 콘텐츠를 올바르게 래핑합니다. 입니다.

위 내용은 내 그리드 항목의 백분율 높이가 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!