고정 위치 그리드 레이아웃이 본문 너비를 초과하는 이유는 무엇입니까?

본문 너비를 초과하는 고정 위치 그리드 레이아웃

고정 위치의 CSS 그리드를 사용하는 경우 그리드 요소가 확장되는 문제가 발생할 수 있습니다. 페이지 본문 너머, 특히 Grid-template-columns 속성을 100%로 설정하는 경우. 이것이 발생하는 이유를 이해하기 위해 문제를 분석하고 해결책을 제시해 보겠습니다.

제공된 CSS 코드에서:

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
}

상위 컨테이너에 대해 100%의 고정 너비를 지정했습니다. 즉, 볼 수 있는 영역의 전체 너비를 차지한다는 의미입니다. Grid-template-columns 속성은 그리드 열의 너비를 각각 40%와 60%로 설정합니다.

그러나 중요한 문제는 위치에 있습니다. position:fixed를 상위 컨테이너로 설정하면 일반 문서 흐름에서 분리되어 지정된 좌표(이 경우 페이지의 왼쪽 상단 모서리)에 배치됩니다. 브라우저는 내용이 표시 영역을 초과하더라도 고정 요소를 위한 공간을 예약합니다.

이 동작은 width: 100% 속성과 관련이 없습니다. 해당 줄을 제거하더라도 문제는 여전히 존재합니다. 범인은 Grid-template-columns 속성입니다.

grid-template-columns 속성은 사용 가능한 공간을 두 개의 열로 나누지만 열 사이에 5px의 그리드 간격을 지정했습니다. 그리드의 전체 너비. 귀하의 경우 40% 60% 5px = 105px입니다. 이 추가 5px는 오른쪽 열의 가장자리를 볼 수 있는 영역 밖으로 밀어내어 본문 외부에 나타나게 합니다.

해결책:

이 문제를 해결하려면 다음을 계산해야 합니다. 그리드 간격을 고려하여 그리드 열의 정확한 백분율. 절대 백분율을 사용하는 대신 사용 가능한 공간의 일부를 나타내는 fr 단위를 사용할 수 있습니다.

.parent {
  position: fixed;
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 6fr;
}

이 수정된 코드에서 4fr 및 6fr 값은 사용 가능한 공간의 4 및 6 부분을 나타냅니다. , 각각. 브라우저는 이러한 비율에 따라 열의 실제 너비를 계산하여 5px의 그리드 간격을 포함하여 상위 컨테이너에 맞는지 확인합니다.

fr 단위를 사용하면 반응형 그리드 레이아웃을 생성할 수 있습니다. 다양한 화면 크기에 맞게 조정되고 그리드 요소가 페이지 본문 내에 유지되도록 합니다.

위 내용은 고정 위치 그리드 레이아웃이 본문 너비를 초과하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!