CSS网格中的列跨度无法按预期工作

我试图构建一个布局，有一个全宽的页眉，然后在左侧垂直堆叠两个150px宽的广告块，主要部分在中间，然后在右侧垂直堆叠两个以上的广告块，底部有一个全宽的页脚

我希望使用的代码是

.container{
显示：网格；
网格间距：2px；
背景色：黑色；
填充：2px；
最小高度：300px；
宽度：100%；
保证金：0自动；
--导航宽度：250px；
}
.集装箱{
网格模板列：150px 1fr 150px；/*三列-广告为150px；主屏幕的其余部分*/
网格模板行：200px 1fr 1fr 40px；
网格模板区域：
“标题”
“左/右ad1主/右ad1”
“左辅助装置2主辅助装置右辅助装置2”
“页脚”；
}
.标题{
背景：淡绿色；
}
.导航{
背景：浅粉红色；
}
.内容{
背景：红色；
}        
.页脚{
背景：蓝色；
}  
div{
字号：28px；
}
身体{
文本对齐：居中；
}
.广告{
高度：250px；
}
标题{
背景：轻鲑鱼；
}
#左图ad1{
背景：淡绿色；
网格区域：左_ad1；
}
#左图ad2{
背景：淡绿色；
网格区域：左_ad2；
}         
#右图ad1{
背景：浅粉红色；
网格区域：右_ad1；
}
#右图ad2{
背景：浅粉红色；
网格区域：右_ad2；
}     
主要{
背景色：红色；
网格区域：主；
}
页脚{
背景：淡天蓝；
网格区域：页脚；
}

标题
左广告1
主要
右图1
左广告2
对，公元2年
页脚

您需要指定

网格区域：标题标题

元素上的code>

.container{
显示：网格；
网格间距：2px；
背景色：黑色；
填充：2px；
最小高度：300px；
宽度：100%；
保证金：0自动；
--导航宽度：250px；
}
.集装箱{
网格模板列：150px 1fr 150px；/*三列-广告为150px；主屏幕的其余部分*/
网格模板行：200px 1fr 1fr 40px；
网格模板区域：
“标题”
“左/右ad1主/右ad1”
“左辅助装置2主辅助装置右辅助装置2”
“页脚”；
}
div{
字号：28px；
}
身体{
文本对齐：居中；
}
.广告{
高度：250px；
}
标题{
背景：轻鲑鱼；
网格区域：标题；
}
#左图ad1{
背景：淡绿色；
网格区域：左_ad1；
}
#左图ad2{
背景：淡绿色；
网格区域：左_ad2；
}         
#右图ad1{
背景：浅粉红色；
网格区域：右_ad1；
}
#右图ad2{
背景：浅粉红色；
网格区域：右_ad2；
}     
主要{
背景色：红色；
网格区域：主；
}
页脚{
背景：淡天蓝；
网格区域：页脚；
}

标题
主要
页脚
左广告1
左广告2
右图1
对，公元2年