백분율 간격을 사용할 때 CSS 그리드가 오버플로되는 이유는 무엇입니까?

CSS 그리드 간격 백분율 오버플로 문제 이해

CSS 그리드를 사용할 때 그리드 간격 속성을 백분율로 지정하면 예상치 못한 결과가 발생할 수 있습니다. 결과, 특히 넘쳐나는 콘텐츠. 이 기사에서는 이러한 오버플로의 원인을 조사하고 이를 해결하기 위한 솔루션을 제공할 것입니다.

문제: 백분율 격차 및 콘텐츠 크기

처음에는 그리드 간격의 백분율 값은 그리드 컨테이너의 높이를 기준으로 계산됩니다. 그러나 이 접근 방식은 다양한 브라우저의 동작에 불일치를 초래할 수 있습니다. 브라우저는 먼저 내용을 기준으로 그리드의 높이를 계산하여 백분율 차이를 효과적으로 무시합니다. 이로 인해 콘텐츠가 전체 그리드 공간을 채우게 되어 그리드 외부에서 오버플로가 발생합니다.

예:

다음 코드를 고려하세요.

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
}

.grid-1 {
  background-color: red;
}

<div class="grid">
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
  <div class="grid-1">
    test
  </div>
</div>

해결책: 그리드 조정 높이

이 문제를 해결하려면 그리드 높이를 명시적으로 조정할 수 있습니다. 한 가지 접근 방식은 높이 속성을 사용하여 콘텐츠의 전체 높이보다 큰지 확인하는 것입니다.

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
  height: calc(100% + 50%);
}

또는 calc() 함수를 사용하여 백분율을 기준으로 그리드 높이를 정의할 수 있습니다. 간격:

.grid {
  display: grid;
  grid-gap: 50%;
  background-color: blue;
  height: calc(100% + 25% * 2);  // 50% divided by 2 for each gap
}

그리드의 높이를 명시적으로 정의하여 콘텐츠와 백분율 기반 간격을 모두 수용하여 오버플로를 방지합니다. 내용입니다.

위 내용은 백분율 간격을 사용할 때 CSS 그리드가 오버플로되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!