머리글과 바닥 글 항목간에 알 수없는 행 수 허용

Question

머리글과 바닥 글과 같은 특정 영역을 정의하는 grid-template-area을 만들 수 있습니까? 그 사이에 알 수없는 양의 행을 만들 수 있습니까?

사용자가 생성 한 콘텐츠가 있으므로 그리드가 될 행이 몇 개인 지 알 수 없습니다. 처음과 마지막이 머리글과 바닥 글인지 확인하고 싶습니다.

판타지 예 :

#grid { 
    display: grid; 
} 

.big { 
    grid-template-columns: repeat(3 1fr); 
    grid-template-rows: auto; 
    grid-template-areas: 
    "header header header" 
    "misc misc misc" 
    [* * *] <---- unknown rows 
    "footer footer footer"; 
} 

.small { 
    grid-template-columns: 1fr; 
    grid-template-rows: auto; 
    grid-template-areas: 
    "header" 
    "misc" 
    [*] <---- unknown rows 
    "footer"; 
} 

Answer 1

헤더와 풋터 중첩 격자 사이의 동적 영역을 고려한다.

#grid { 
    display: grid; 
} 

.big { 
    grid-template-columns: repeat(3 1fr); 
    grid-template-rows: auto; 
    grid-template-areas: 
    "header header header" 
    "misc misc misc" 
    "flexible flexible flexible" <-- unknown number of rows inside 
    "footer footer footer"; 
} 

flexible { 
    display: grid; 
    grid-auto-rows: 60px; /* or whatever */ 
    grid-template-columns: 1fr; 
}