CSS 그리드의 백분율과 `fr` 단위: 차이점은 무엇인가요?

백분율과 fr 단위의 차이점은 무엇입니까?

CSS 그리드 레이아웃을 사용할 때 열 너비를 정의하는 두 가지 일반적인 단위는 백분율(%)과 fr 단위입니다. fr 단위. 두 단위 모두 유연한 그리드 레이아웃을 만드는 데 사용될 수 있지만 특정 상황에서는 다르게 작동합니다.

백분율 단위(%)

백분율 단위는 컨테이너 너비를 나타내는 상대적 단위입니다. 예를 들어 너비가 50%인 열은 컨테이너 너비의 절반을 차지합니다. 백분율 단위는 고정 너비 열을 만드는 데 자주 사용됩니다.

그러나 백분율 단위는 컨테이너 너비가 명시적으로 정의되지 않은 경우 문제를 일으킬 수 있습니다. 예를 들어 컨테이너의 너비가 auto인 경우 사용 가능한 공간에 맞게 열이 늘어나거나 줄어듭니다. 이로 인해 특히 반응형 디자인에서 원치 않는 동작이 발생할 수 있습니다.

fr 단위

fr 단위는 컨테이너에서 사용 가능한 여유 공간을 나타내는 상대적 단위입니다. 예를 들어 너비가 1fr인 열은 컨테이너 여유 공간의 동일한 부분을 차지합니다. fr 단위는 사용 가능한 공간에 자동으로 조정되는 유연한 열을 만드는 데 자주 사용됩니다.

fr 단위는 컨테이너 너비의 영향을 받지 않습니다. 예를 들어 컨테이너의 너비가 auto인 경우 열은 여전히 ​​여유 공간의 동일한 부분을 차지합니다. 따라서 fr 단위는 반응형 그리드 레이아웃을 만드는 데 이상적입니다.

결론

백분율 단위는 고정 너비 열을 만드는 데 유용하고, fr 단위는 유연한 열을 만드는 데 유용합니다. 사용할 단위를 선택할 때 기둥의 원하는 동작을 고려하는 것이 중요합니다.

위 내용은 CSS 그리드의 백분율과 `fr` 단위: 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!