css gridで高さを内容に合わせて可変させて、セル内の要素数が減っても変な余白を発生させないようにする
grid-template-rowsを指定しないと、セル内の要素が減った時に良きに計らって高さが調整されて思わぬ余白が発生することがある。
https://gyazo.com/f4c3522da2f48b18bbb5f1096dbe2bb0
https://gyazo.com/0dc149dc65ce5eefae5cb193e789def2
単純にfrを指定しても要素が減ると変な余白ができるだけ。
max-content、min-contentとfrを組み合わせるといい感じになった。
https://gyazo.com/8b9bdf5d3c10b7043ae9b22556b9c3a8
https://gyazo.com/471faf1cae482806293165da92d26e2f
code:html
<div class="container1">
<div class="grid1">
要素1
</div>
<div class="grid2">要素2:坊っちゃん</div>
<div class="grid3">要素3:親譲りの無鉄砲で小供の時から損ばかりしている。</div>
<div class="grid4">
<div>要素4:親譲りの無鉄砲で小供の時から損ばかりしている。</div>
<div>要素4:親譲りの無鉄砲で小供の時から損ばかりしている。</div>
<div>要素4:親譲りの無鉄砲で小供の時から損ばかりしている。</div>
</div>
<div class="grid5">要素5</div>
</div>
code:css
.container1 {
display:grid;
grid-template-areas:
"area1 area2"
"area1 area3"
"area1 area4"
"area5 area5";
grid-template-columns: 420px 1fr;
/*要素に合わせて高さを可変させたいものにmax-content、残りの幅に合わせて高さを調整させたいものに1frを指定*/
grid-template-rows: max-content max-content 1fr auto;
margin-bottom: 96px;
}