https://html5experts.jp/shumpei-shiraishi/24439/
「display: grid」の要素にグリッドの列幅、行高さを設定する。
各グリッドセルになる要素には、「セル開始の線番号 / セル終了の線番号」という書式で行と列の開始終了位置を指定してやる。
線番号は、それぞれ「1から開始する」。また、「最後の線は-1、最後から2番目の線は-2」で指定できる。
.layout {
display : grid;
grid-template-columns : 100px 1fr 100px;
grid-template-rows : 30px 1fr 150px;
}
.header {
grid-column : 1 / -1;
grid-row : 1 / 2;
}
.content {
grid-column : 2 / -2;
grid-row : 2 / 3;
}
div {
border : solid 1px red;
}
<div class="layout">
<div class="header">head</div>
<div class="content">content</div>
</div>
