내 그리드 항목의 백분율 높이가 올바르게 작동하지 않는 이유는 무엇입니까?

내 그리드 요소의 높이가 올바르게 계산되지 않는 이유는 무엇입니까?

CSS 그리드에서 높이 백분율이 해석되는 방식으로 인해 잘못된 높이 계산이 발생할 수 있습니다. 레이아웃.

코드에서 그리드 컨테이너의 높이는 100px로 고정되어 있고 그리드 항목은 높이가 200%입니다. 일반적으로 그리드 항목은 컨테이너 높이(200px)의 두 배를 차지할 것으로 예상합니다. 그러나 귀하의 경우에는 이런 일이 발생하지 않습니다.

CSS 그리드 레이아웃에서는 그리드 요소가 트랙 내부에 존재하고, 이는 다시 컨테이너 내에 존재하기 때문입니다. 그리드 항목은 컨테이너 내에서 직접적으로가 아닌 트랙 내에서 행이나 열을 차지합니다.

따라서 그리드 항목의 높이 백분율은 컨테이너 높이가 아닌 해당 항목이 차지하는 트랙의 높이를 기준으로 합니다. 코드에서 행에는 필요에 따라 그리드 항목을 늘릴 수 있는 기본 자동 높이가 있습니다.

이 문제를 해결하려면 그리드 항목이 차지하는 행에 대해 특정 높이를 설정해야 합니다. 이렇게 하면 그리드 항목의 높이 백분율이 해당 높이를 기준으로 올바르게 계산됩니다. 수정된 코드에서는 컨테이너 높이와 일치하도록 행 높이가 100px로 설정되어 원하는 동작이 발생합니다.

.gridContainer {
  ...
  grid-template-rows: 100px;    /* Specifies a fixed height for the row */
}

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