ヘッダーとフッターのグリッド項目の間に未知数の行を許可する

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; 
}