콘텐츠 크기에 관계없이 CSS 그리드를 사용하여 동일한 너비 열을 만드는 방법은 무엇입니까?

CSS 그리드를 사용하여 동일한 너비의 열 만들기

행 요소 내의 하위 요소를 동일한 수의 열에 표시하려고 합니다. 아이들의 수. Flexbox는 이를 쉽게 수행할 수 있지만 CSS Grid는 다른 과제를 제시합니다. 이 기사에서는 CSS 그리드를 사용하여 이를 달성하기 위한 솔루션을 제공합니다.

솔루션

첫 번째 일반적인 시도는 그리드의 값으로 반복(3, 1fr)을 사용하는 것입니다. -템플릿 열 속성. 그러나 1fr은 사용 가능한 공간을 기준으로 공간 분포를 계산합니다. 이 제한은 콘텐츠가 트랙 크기를 초과할 때 문제가 되며, 열이 넘치지 않도록 방지하고 이에 따라 너비를 조정합니다. 잘린 내용이 있는 부분 열은 동일하지 않을 수 있습니다.

열 너비가 완전히 동일하도록 하려면 다음 규칙을 사용해야 합니다.

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

minmax(0, 1fr)는 그리드 트랙이 최소 크기는 0이고 임의의 최대 크기는 1fr입니다. 이렇게 하면 열의 너비가 항상 동일하고 트랙 크기를 초과하는 콘텐츠를 수용할 수 있습니다.

콘텐츠 오버플로를 활성화하면 브라우저의 기본 동작, 콘텐츠 크기 또는 사용 가능한 공간. 질문에 제공된 예는 두 가지 접근 방식, 즉 반복(3, 1fr)과 반복(3, minmax(0, 1fr))의 차이점을 보여줍니다.

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