는 어떻게 CSS 그리드

에 최대 높이를 설정하는 나는 다음과 같은 CSS 그리드 있습니다는 어떻게 CSS 그리드

.grid-3x4 { 
     display: grid; 
     grid-template-columns: 1fr 1fr 1fr; 
     grid-template-rows: 1fr 1fr 1fr 1fr; 
     grid-template-areas: 
     'a b c ' 
     'd e f' 
     'g h i' 
     'l m n'; 
    }

내가 그리드 100vh의 고정 높이를 갖고 싶어, 템플릿 영역의 내용에도 불구하고있다. 내가 삽입을 시도 :

max-height : 100vh;

.grid-3 × 클래스에 있지만 작동하지 않습니다. 다른 클래스 내부에 격자를 래핑하려고했는데 포함하는 클래스의 최대 높이를 설정했지만 행운은 없습니다. 어떻게해야합니까?

출처

2017-10-12 Matteo Boscolo

글쎄'='그것은 아무 것도 작동하지 않을 것입니다 ... – CBroe

@cbroe fixed, sorry –

max-height (최대 높이)은 컨테이너 높이를 제한합니다. 컨테이너가 항상 최소 높이를 갖도록하려면 min-height (최소 높이)을 설정해야합니다.

https://jsfiddle.net/ppvo9y32/2/

에게 당신을 :

할 수있는 간단한 방법은 최소 100vh의 최대 높이가 내 모든 세포는 (당신이 스크롤없이 볼 수 있도록 내가 10vh으로 예를했던) 것을 설정하는 단지입니다 콘텐츠가 셀 경계를 벗어날 때 발생하는 상황을 제어하려면 overflow (예 : overflow: hidden)을 설정해야합니다.

출처

2017-10-12 00:24:23

이것은 불행히도 묻지 않은 것입니다. 단일 문자보다 큰 텍스트를 삽입하면 표 형태의 섹션이 최소 높이 이상으로 확장됩니다. –

그래서 100vh 높이를 원한다면 4 fr, 모든 fr에는 최소 높이와 최대 높이 25vh가 있어야합니다. 그것은 지금 일하고있어, 내 프로젝트에서 광범위하게 시도해. –

는 어떻게 CSS 그리드

답변

관련 문제