`grid-template-columns`를 100%로 설정하면 내 그리드 컨테이너가 오버플로되는 이유는 무엇입니까?

그리드-템플릿-열에서 100% 그리드 표시가 본문 너비를 초과하는 이유

CSS 그리드를 활용할 때 영향을 이해하는 것이 중요합니다. 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;
}</code>

이 설정을 사용하면 상위 컨테이너가 오른쪽 뷰포트를 넘어 확장되는 문제가 발생할 수 있습니다. 위치가 고정으로 설정된 경우 측면. 이는 너비가 100%로 설정되었기 때문이 아니라 지정된 Grid-template-columns 값과 Grid-gap의 조합 때문입니다.

grid-template-columns 속성이 분할되기 때문에 문제가 발생합니다. 사용 가능한 공간을 두 개의 열로 나누고 각각 상위 컨테이너 너비의 40%와 60%로 설정합니다. 또한 5px 그리드 간격으로 인해 열 사이에 추가 공간이 생깁니다. 결과적으로 두 열에 할당된 전체 공간에 간격을 더한 값이 100%를 초과하여 상위 컨테이너가 오른쪽에서 오버플로됩니다.

이 문제를 해결하려면 그리드에 고정된 백분율을 지정하지 않아야 합니다. 열을 사용하고 대신 fr 단위를 활용합니다. fr 단위는 지정된 너비와 간격을 고려한 후 남은 공간을 분배할 수 있는 분수 기반 크기 조정 단위입니다.

다음은 조정된 코드의 예입니다.

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

In 이 수정된 코드에서 Grid-template-columns 속성은 4fr 6fr로 설정되어 첫 번째 열의 너비는 4단위, 두 번째 열의 너비는 6단위여야 하며 나머지 공간은 비례적으로 나누어져야 함을 나타냅니다. 이렇게 하면 위치에 관계없이 상위 컨테이너가 경계를 오버플로하지 않게 됩니다.

위 내용은 `grid-template-columns`를 100%로 설정하면 내 그리드 컨테이너가 오버플로되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!