백분율과 함께 `grid-template-columns`를 사용할 때 내 그리드가 오버플로되는 이유는 무엇입니까?

100% 그리드-템플릿-열이 포함된 그리드 오버플로 본문:

다음 코드를 고려하세요.

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

.left {
  border: 2px solid red;
}

.right {
  border: 2px solid red;
}</code>

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

이러한 설정으로 위치가 고정되면 상위 div가 본문 오른쪽으로 오버플로됩니다. 그러나 문제는 너비: 100%가 아니라 그리드 템플릿에 있습니다.

해결책:

이 문제는 그리드 템플릿이 사용 가능한 너비를 분할하기 때문에 발생합니다. 공간을 40%와 60%로 나누고 그리드 간격으로 5px를 남겨둡니다. 이는 100%를 초과합니다. 이 문제를 해결하려면 fr 단위를 대신 사용하세요.

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

이 변경으로 열은 5px 간격을 고려한 후 남은 공간을 분할합니다. 따라서 위치가 고정되어 있어도 상위 div는 본문에 맞도록 됩니다.

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