CSS 그리드: 백분율과 `fr` 단위: 어느 것을 사용해야 합니까?

CSS 그리드 레이아웃의 백분율과 Fr 단위

fr 단위 이해

기능: Fr 단위는 내부 여유 공간을 할당합니다. 에이 컨테이너.

계산: 여유 공간(그리드 간격을 뺀 후)은 fr 열 간에 균등하게 나뉩니다.

백분율(%) 단위 이해

함수: 열 너비를 컨테이너 너비의 백분율로 정의합니다. 너비.

계산: 열 너비는 전체 너비를 그리드 간격의 너비를 포함하여 열 수로 나누어 결정됩니다.

차이: 오버플로와 . 분포

비율: 고정된 단위 길이로 인해 열이 컨테이너 너비를 벗어나 넘칠 수 있음 및 그리드 간격.

Fr: 열은 컨테이너 내의 여유 공간만 차지하며 컨테이너 너머로 확장되지는 않습니다. 그리드 간격은 여유 공간 할당에 영향을 주지 않습니다.

그리드 간격과 함께 백분율 사용

백분율 너비로 인한 오버플로를 방지하려면 전체 컨테이너 너비에서 그리드 간격의 전체 너비를 뺀 다음 수 열:

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px))

여기서:

• 8.3333%는 간격이 없는 각 열의 백분율 너비입니다.
• 9.1667px는 11개의 그리드 간격의 총 너비입니다( 각 10px)

백분율에 적절한 값을 사용하여 너비를 설정하거나 fr 단위를 구현하면 CSS 그리드 레이아웃에서 열 크기를 관리하고 오버플로를 방지할 수 있습니다.

위 내용은 CSS 그리드: 백분율과 `fr` 단위: 어느 것을 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!