为什么'；我的HTML结构不能与CSS网格布局一起工作吗？

我试图理解HTML结构是如何影响规范的。我正在使用Chrome Canary，并启用了实验功能

附加的代码按预期工作，但将导航和搜索放在header标记中只是为了语义，这会使CSS网格的位置偏离

如果我能够使用CSS网格模块，并且仍然将带有导航、品牌和搜索的语义标题包装在标题标签中，我还缺少什么

html{
框大小：边框框；
最小高度：2000px；
}
*,
*：之前，
*：之后{
框大小：继承；
}
.包装纸{
宽度：100%；
显示：网格；
网格模板列：20%自动20%；
网格模板行：50px自动50px；
背景色：#fff；
颜色：#444；
}
.main标题{
格构柱：1/3跨；
网格行：1；
背景#39444C；
}
.品牌{
身高：100%；
保证金：自动；
颜色：#FFFFFF；
背景：#2E3840；
}
.搜索{
网格柱：3；
网格行：1；
}
navbar先生{
网格柱：2；
网格行：1；
背景#39444C；
}
保险商实验室{
填充：12px；
保证金：0；
}
李国宝先生{
显示：内联；
填充：10px；
}
李娜先生{
颜色：#9CA19A；
文字装饰：无；
字号：1.1rem；
}
.导航栏a:悬停{
颜色：#00A5D5；
}
.侧导航{
网格柱：1；
网格行：2；
背景#f2f2；
}
.内容{
网格柱：2；
网格行：2；
背景：黄色；
}
.mainfoter{
背景：灰色；
格构柱：1/2跨；
网格行：3；
}
.main标题h1{
字体大小：2.8vw；
}

简单的费用








测试
侧导航
测试
测试
测试
页脚

我想，如果你将品牌、导航和搜索放在标题中，它们就不再是网格的直接后代，因此要正确放置它们，你需要在

子网格

关键字可用时创建另一个网格/子网格。现在，您可以使用相同尺寸的display:grid

鉴于此HTML：

<div class="wrapper">
<div class="header">
    <h1 class="logo">Simply Expense</h1>
    <nav class="navbar">
        <ul>
            <li><a href="#">Expenses</a></li>
            <li><a href="#">Receipts</a></li>
            <li><a href="#">Reports</a></li>
        </ul>
    </nav>
    <div class="search">
        <button>test</button>
        <input type="text">
    </div>
</div>
</div>

演示：

html{
框大小：边框框；
最小高度：2000px；
}
*，*：之前，*：之后{
框大小：继承；
}
身体{
利润率：10px；
填充：0；
}
.标题{
格构柱：1/3跨；
网格行：1；
显示：网格；
网格模板列：20%60%20%；
网格模板行：50px；
}
.包装纸{
显示：网格；
网格模板列：20%60%20%；
网格模板行：50px自动50px；
}
.标志{
网格柱：1；
网格行：1；
保证金：0；
颜色：#FFFFFF；
背景：#2E3840；
}
.搜索{
网格柱：3；
网格行：1；
背景：#2E3840；
}
navbar先生{
网格柱：2；
网格行：1；
背景#39444C；
}
.侧导航{
网格柱：1；
网格行：2；
背景#f2f2；
}
.内容{
格构柱：2/2跨；
网格行：2；
背景：黄色；
}
.mainfoter{
背景：灰色；
格构柱：1/3跨；
网格行：3；
}
.main标题h1{
字体大小：2.8vw；
}
保险商实验室{
填充：12px；
边距：0；}
李国宝先生{
显示：内联；
填充：10px；}
李娜先生{
颜色：#9CA19A；
文字装饰：无；
字体大小：1.1rem；}
.导航栏a:悬停{
颜色：#00A5D5；}

简单的费用





测试

.wrapper {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 50px auto 50px;
} 
.header {
    grid-column: 1 /span 3;
    grid-row: 1 ;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 50px;
}
.logo {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: #FFFFFF;
    background: #2E3840;
}
.search{
    grid-column: 3;
    grid-row: 1;
    background: #2E3840;
}