열 너비에 대한 CSS 그리드 레이아웃의 'fr'과 백분율 단위의 주요 차이점은 무엇입니까?

CSS 그리드 레이아웃에서 백분율과 fr 단위의 차이

CSS 그리드 레이아웃을 사용할 때 너비를 정의할 때 백분율과 fr 단위의 차이를 이해하는 것이 중요합니다. 열.

fr 단위

fr 단위는 "소수 단위"를 나타내며 컨테이너에서 사용 가능한 여유 공간에서만 작동합니다. fr 단위를 사용하는 경우 브라우저는 그리드 간격을 고려한 후 남은 공간을 기준으로 각 열의 너비를 계산합니다.

예를 들어 아래 코드에서 그리드 컨테이너는 12개의 열로 나누어져 있습니다. 컨테이너 내에서 동일한 여유 공간을 차지하는 비율:

grid-template-columns: repeat(12, 1fr);

% 단위

반면, 백분율 단위는 각 열의 너비를 전체 컨테이너 너비의 백분율로 정의합니다. 즉, 각 열의 너비는 컨테이너의 실제 너비를 기준으로 계산됩니다.

예를 들어 아래 코드에서 각 열의 너비는 8.33333%이며, 이는 100%를 12로 나눈 값입니다.

grid-template-columns: repeat(12, calc(100% / 12));

백분율로 인해 열이 오버플로

fr과 백분율 단위의 주요 차이점은 그리드 간격을 처리하는 방법입니다. fr 단위를 사용하면 열 너비를 계산하기 전에 컨테이너의 여유 공간에서 그리드 간격을 뺍니다. 이렇게 하면 열이 컨테이너 너비를 오버플로하지 않습니다.

그러나 백분율 단위를 사용하면 그리드 간격이 열 너비에 추가됩니다. 즉, 열의 전체 너비가 100%와 같더라도 그리드 간격을 추가하면 열이 컨테이너 너비를 초과할 수 있습니다.

이 문제를 해결하려면 fr 단위를 사용할 수 있습니다. 또는 그리드 간격을 고려하여 백분율 계산을 조정하세요.

위 내용은 열 너비에 대한 CSS 그리드 레이아웃의 'fr'과 백분율 단위의 주요 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!