CSS 그리드 레이아웃: 백분율과 `fr` 단위 – 차이점은 무엇입니까?

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

CSS로 그리드 레이아웃을 구성할 때 열과 행 크기를 지정하는 단위 선택이 레이아웃의 동작. 일반적으로 사용되는 두 가지 단위는 백분율과 분수 단위(fr)입니다. CSS 그리드 레이아웃의 맥락에서 이러한 단위 간의 주요 차이점을 살펴보겠습니다.

fr 단위

fr 단위는 그리드 간격을 고려한 후 그리드 컨테이너 내에서 사용 가능한 여유 공간의 분수 단위를 나타냅니다. . 기본적으로 열이나 행이 남은 공간의 비례적인 양을 차지할 수 있습니다. 여유 공간은 fr 값이 있는 열이나 행에 균등하게 분배됩니다.

이렇게 하면 그리드 컨테이너의 크기가 조정될 때 요소의 크기도 이에 맞춰 조정됩니다. Grid-column-gap 및 Grid-row-gap으로 정의된 그리드 간격은 fr 값을 계산하기 전에 사용 가능한 공간에서 뺍니다.

백분율 단위

백분율 단위 에서는 그리드 간격을 포함하여 전체 그리드 컨테이너의 백분율로 열이나 행의 너비를 지정합니다. 즉, 요소의 크기는 고정되어 있으며 컨테이너의 크기에 따라 동적으로 조정되지 않습니다.

결과적으로 그리드 간격을 포함한 열의 전체 너비가 그리드 컨테이너의 너비를 초과합니다. 이로 인해 레이아웃이 컨테이너를 오버플로할 수 있습니다.

예

동작의 차이를 설명하려면 다음 그리드 레이아웃을 고려하세요.

.grid {
  display: grid;
  grid-template-columns: repeat(12, calc(100% / 12));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

이 경우 백분율 단위는 열 너비를 정의하는 데 사용됩니다. 결과적으로 그리드 간격(11 간격과 10px 간격)을 포함한 열의 전체 너비가 그리드 컨테이너의 너비를 초과하여 레이아웃이 오버플로되는 현상이 발생합니다.

그러나 다음을 사용하도록 전환하면 대신 fr 단위:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

이제 열은 사용 가능한 여유 공간에 비례하는 양을 차지하고 그리드 간격을 계산하기 전에 전체 공간에서 뺍니다. fr 값. 그 결과 그리드 컨테이너의 크기에 따라 동적으로 조정되는 반응형 레이아웃이 생성됩니다.

결론

그리드 레이아웃에 적합한 단위를 선택하는 것은 원하는 동작에 따라 다릅니다. 백분율 단위는 고정된 크기를 원할 때 적합하고, fr 단위는 사용 가능한 공간에 따라 크기가 조정되는 반응형 레이아웃이 필요할 때 유용합니다. 효율적이고 시각적으로 만족스러운 CSS 그리드 레이아웃을 생성하려면 이러한 단위 간의 차이점과 해당 단위가 레이아웃에 미치는 영향을 이해하는 것이 중요합니다.

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