Html 如何使用CSS网格跳过一列？

我需要保持中间的网格项为空。我认为可以使用以下属性：

网格模板区域

grid-template-areas:
  "header . header"
  "main . ."
  "footer . footer";

但不幸的是，这并没有给出正确的显示

因此，我使用了5个名为item-a到item-e的类，然后在css中设置网格中的正确位置。然而，这并不是一个非常有效的方法。有人知道如何使它更有效吗

.content容器{
宽度：51.5em；
高度：30公分；
填充物：2.125em 1.5em；
显示：网格；
网格模板列：45%自动45%；
网格模板行：自动；
}
.项目a{
网格柱：1；
网格行：1/3；
}
.项目b{
网格柱：3；
网格行：1/3；
}
.项目-c{
网格柱：1；
网格行：2/3；
}
.项目-d{
网格柱：1；
网格行：3/3；
}
.项目e{
网格柱：3；
网格行：3/3；
}

名字
姓
电子邮件
密码
确认密码

您不需要所有这些代码，您可以简化如下：

.content容器{
最大宽度：51.5em；
高度：20em；
填充物：2.125em 1.5em；
显示：网格；
网格模板列：1fr 1fr；/*仅定义2列*/
列间距：4em；/*控制两列之间的间距*/
边框：1px实心；
}
.项目-d{
网格列：1；/*将路径移动到第一列，而不是第二列*/
}
输入{
显示：块；
宽度：100%；
框大小：边框框；
}

名字
姓
电子邮件
密码
确认密码

是否也有一种方法可以使用

网格模板区域

属性执行此操作？@Ezrab_uuu是的，但对于这样一个简单的布局不需要。自动放置将为您完成90%的工作，您只需一个指令即可移动一个元件谢谢！但我试图通过以不同的方式创建相同的网格来了解网格是如何工作的。这就是为什么我想知道人们会怎么做。@Ezrab_uu总是从让网格为您放置项目开始，然后在需要时进行调整。如果你一开始就把所有的元素都放在自己的位置上，你就会迷失方向，而且效率也会降低，尤其是在布局简单的时候。