CSS 그리드에서 동일한 너비의 열을 얻는 방법은 무엇입니까?

CSS 그리드의 동일한 너비 열

Flexbox는 동일한 너비의 열에 항목을 표시하는 기능으로 인정을 받았습니다. 그러나 CSS Grid는 유연한 레이아웃 옵션도 제공하므로 동일한 효과를 얻는 방법에 대한 의문이 제기됩니다.

제공된 HTML 구조에는 여러 하위 항목 요소가 있는 행 요소가 포함되어 있습니다. 목표는 존재하는 항목 수에 관계없이 이러한 항목을 행 전체에 균등하게 배포하는 것입니다.

CSS Grid에 제안된 일반적인 솔루션은 반복(3, 1fr)을 사용하는 것입니다. 이는 원하는 효과를 부분적으로 달성하지만 콘텐츠가 트랙 크기를 초과하면 실패할 수 있습니다. 1fr은 사용 가능한 공간의 분포를 의미하므로 모든 경우에 동일한 열 너비가 보장되지는 않습니다.

정확한 동일성을 보장하려면 대신 다음 CSS 코드를 사용해야 합니다.

<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>

minmax(0, 1fr)은 그리드 트랙을 최소 크기 0, 최대 크기 1fr로 제한합니다. 이렇게 하면 내용이 오버플로되더라도 모든 열의 너비가 동일하게 유지됩니다.

다음은 반복(3, 1fr)과 반복(3, minmax(0, 1fr))의 차이점을 보여주는 예입니다.

<code class="html"><div class="container">
  <div class="row" style="grid-template-columns: repeat(3, 1fr)">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>

  <div class="row" style="grid-template-columns: repeat(3, minmax(0, 1fr))">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>
</div></code>

repeat(3, 1fr)을 사용하면 오버플로 항목이 해당 열에서 나옵니다. 대조적으로,peat(3, minmax(0, 1fr))은 모든 열이 동일하게 유지되도록 보장하며 아래에 오버플로 내용이 표시됩니다.

위 내용은 CSS 그리드에서 동일한 너비의 열을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!