콘텐츠 크기에 관계없이 CSS 그리드에서 동일한 너비의 열을 얻는 방법은 무엇입니까?

CSS 그리드에서 동일한 너비의 열 얻기

CSS 그리드로 작업할 때 요소를 열 전체에 균등하게 배포하는 것이 어려울 수 있습니다. Flexbox는 간단한 접근 방식을 제공하지만 CSS Grid를 사용하여 동일한 결과를 얻으려면 좀 더 고려해야 합니다.

원래 질문:

"요소를 행 내의 하위 항목 수에 관계없이 동일한 너비 열의 행에 CSS 그리드를 사용해 보았지만 만드는 데 문제가 있습니다. work."

답변:

repeat(3, 1fr)의 일반적으로 제안되는 솔루션은 완전히 정확하지 않습니다. 응답에 명시된 바와 같이:

"1fr은 사용 가능한(!) 공간의 분배에 관한 것입니다. 이는 콘텐츠가 트랙 크기보다 커지자마자 중단됩니다."

열이 유지되도록 하려면 너비가 같으므로 대신 minmax(0, 1fr)를 활용하는 것이 좋습니다.

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

minmax(0, 1fr)는 그리드 트랙을 다음과 같이 허용합니다. 작게는 0에서 크게는 1fr입니다. 이렇게 하면 열의 너비가 동일하게 유지됩니다. 그러나 이 접근 방식은 열 너비를 초과하는 경우 콘텐츠 오버플로가 발생할 수 있습니다.

이러한 접근 방식 간의 차이점을 시각적으로 확인하려면 다음 예를 고려하세요.

<code class="html"><div class="row">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div></code>

repeat(3 , 1fr), 열은 사용 가능한 공간에 따라 너비를 조정하므로 너비가 달라질 수 있습니다. 그러나 Repeat(3, minmax(0, 1fr))을 사용하면 콘텐츠 크기에 관계없이 세 열 모두 정확히 동일한 너비를 갖게 됩니다.

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