在网格内潜水，不占用分配的区域

Question

我有一个容器，我在其中使用网格布局，如下所示

我的HTML看起来像这个

<div class='pagelayout'>
<div class="tophalf">This div needs to occupy entire width of the page</div>
</div>

CSS看起来像这个

.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 70fr 30fr;
grid-template-rows: auto  auto;
overflow: auto;
grid-template-areas:
'tophalf tophalf'
'leftside rightside'
}
.tophalf{
grid-area: tophalf;
}

代码段：

.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 70fr 30fr;
grid-template-rows: auto auto;
overflow: auto;
grid-template-areas: 'tophalf tophalf' 'leftside rightside'
}
.tophalf {
grid-area: tophalf;
}

<div class='pagelayout'>
<div class="tophalf">This div needs to occupy entire width of the page</div>
</div>

但是div(这个div需要占据页面的整个宽度(只占用70fr，剩下的30fr没有使用。

如果我这样更改网格模板，一切都会很好。

.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 1fr;
grid-template-rows: auto;
overflow: auto;
grid-template-areas:
'tophalf tophalf'
'leftside rightside'
}
.tophalf{
grid-area: tophalf;
}

代码段：

.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 1fr;
grid-template-rows: auto;
overflow: auto;
grid-template-areas: 'tophalf tophalf' 'leftside rightside'
}
.tophalf {
grid-area: tophalf;
}

<div class ='pagelayout'>
<div class ="tophalf">This div needs to occupy entire width of the page</div>
</div>

第一种情况下我做错了什么？

Answer 1

grid-template-columns: 70fr 30fr;这意味着创建两个列，其中一个需要70fr&另一个需要30fr

grid-template-columns: 70fr 30fr;
grid-template-rows: auto auto;

.pagelayout {
display: grid;
flex-grow: 1;
grid-template-columns: 70fr 30fr;  /*this means create two colums one which takes 70fr & other which takes 30fr*/
grid-template-rows: auto;
overflow: auto;
outline:2px solid green;
}
.tophalf {
outline:2px solid red;
}

<div class='pagelayout'>
<div class="tophalf">This div needs to occupy entire width of the page</div>
</div>