내용에 관계없이 동일한 크기의 CSS 그리드 열을 만드는 방법은 무엇입니까?

균일한 크기의 CSS 그리드 열

많은 프로그래머가 CSS 그리드 레이아웃에서 동일한 너비의 열을 얻는 데 어려움을 겪고 있습니다. Flexbox는 이 작업을 단순화하지만 CSS 그리드를 사용해도 이 작업을 수행할 수 있습니다.

가장 일반적인 접근 방식은 Grid-template-columns에서와 같이 반복() 함수를 사용하는 것입니다:peat(3, 1fr); . 그러나 이 단축어는 사용 가능한 공간만 배포하므로 콘텐츠가 트랙 크기를 초과하는 경우 문제가 될 수 있습니다. 콘텐츠 크기에 관계없이 동일한 너비를 보장하려면 다음 구문을 사용하세요.

grid-template-columns: repeat(3, minmax(0, 1fr));

minmax() 속성을 사용하면 트랙을 0에서 1fr까지 허용하여 동일한 크기의 열을 보장할 수 있습니다. 그러나 콘텐츠가 너무 크거나 래핑할 수 없는 경우 오버플로가 발생할 수 있습니다.

다음은 차이점을 보여주는 예입니다.

• repeat(3, 1fr): If 콘텐츠가 트랙 크기를 초과하면 열 너비가 고르지 않을 수 있습니다.
• repeat(3, minmax(0, 1fr)): 열 너비는 항상 동일하게 유지되지만 오버플로가 발생할 수 있습니다.

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