CSS 그리드에서 정확히 동일한 열 너비를 얻는 방법은 무엇입니까?

CSS 그리드에서 정확히 동일한 열 너비

CSS 그리드에서 동일한 크기의 열을 만드는 것은 간단해 보일 수 있지만 구체적인 접근 방식이 필요합니다. Flexbox는 flex-basis 속성으로 쉬운 솔루션을 제공하지만 CSS Grid는 보다 정확한 구성이 필요합니다.

과제:

다음과 같은 HTML 구조가 주어지면

<code class="html"><div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div></code>

목표는 행 내의 하위 요소 수에 관계없이 이러한 요소를 동일한 열에 표시하는 것입니다.

해결책:

공통 1fr은 엄격한 열 동등성을 적용하는 대신 사용 가능한 공간을 분배하므로 반복(3, 1fr) 접근 방식은 충분하지 않습니다. 콘텐츠가 트랙 크기를 초과하는 경우 자동으로 조정되지 않아 열 너비가 고르지 않을 수 있습니다.

정확히 동일한 열 너비를 얻으려면 다음 CSS 속성을 사용하세요.

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

설명:

minmax(0, 1fr)을 사용하면 그리드 트랙이 0만큼 작지만 최대 1fr까지 가능합니다. 이렇게 하면 열이 동일하게 유지됩니다. 그러나 콘텐츠가 열보다 크거나 래핑할 수 없는 경우 오버플로가 발생할 수 있으므로 주의하세요.

차이점을 설명하려면 다음 예를 고려하세요.

<code class="css">.equalColumns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.minmaxEqualColumns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}</code>

equalColumns 반복(3, 1fr) 포함:

repeat(3, minmax(0, 1fr)) 포함 minmaxEqualColumns:

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