그리드 템플릿 열에서 100% 그리드 표시가 본문을 초과하는 이유는 무엇입니까?

그리드 템플릿 열에서 100% 그리드 표시가 본문을 초과하는 이유는 무엇입니까?

제공된 CSS 코드:

<code class="css">.parent {
  position: fixed;
  width: 100%;
  left: 0;
  top: 14px;
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px;
  background: #eee;
}</code>

문제는 width: 100% 속성이 아니라 Grid-template-columns 설정에서 발생합니다. 백분율(40% 및 60%)과 그리드 간격(5px)을 지정하면 전체 너비가 100%를 초과합니다. 이로 인해 고정된 위치에 상위 컨테이너가 본문의 오른쪽 가장자리를 넘어 확장됩니다.

해결책: fr 단위 사용

이 문제를 해결하려면 대신 분수 단위(fr)를 사용하는 것이 좋습니다. 그리드 템플릿 열 선언의 백분율입니다. 분수 단위는 정의된 간격을 고려하여 비례적으로 공간을 할당합니다.

<code class="css">.parent {
  ...
  grid-template-columns: 4fr 6fr;
  ...
}</code>

예:

<code class="html"><div class='parent'>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div></code>

이 수정을 통해 상위 컨테이너는 이제 신체 경계 내에서 완전히 표시됩니다. 고정되어 위치합니다.

위 내용은 그리드 템플릿 열에서 100% 그리드 표시가 본문을 초과하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!