CSS网格将所有项目放置在右上角

你知道为什么要把所有的东西都放在右上角吗

如果我把

grid-template-areas:
    ". . title title . ."
    ". . server server . ."
    ". . who who . ."
    ". . toWho toWho . ."
    ". . what what . .";

它可以很好地工作，但是我想在第一个div中添加一些图标（一个在左侧，另一个在右侧）。为此我又创建了两列，但在将它们添加到网格模板区域时，它们会将所有项都放在右上角。 知道我做错了什么吗

提前谢谢

*{
保证金：0；
填充：0；
}
.纸张{
显示：网格；
网格模板列：1fr 40px 200px 200px 40px 1fr；
网格模板行：1fr 1fr 1fr 1fr 1fr；
网格模板区域：
“.logo title服务器。”
“.server。”
“谁，谁。”
“toWho toWho toWho toWho”
“什么，什么。”；
}
.纸张部{
边框宽度：5px；
边框颜色：黑色；
边界：双；
}
/* https://www.youtube.com/watch?v=HgwCeNVPlo0 */
.服务器{
网格区域：服务器；
}
.头衔{
网格区域：标题；
}
.标志{
网格区域：标志；
}
.谁{
网格区域：世卫组织；
}
.什么{
网格区域：什么；
}
toWho先生{
网格区域：toWho；
}

服务器
标题文本
标志
谁
什么
托沃

问题是您的第二行（

server

s）占用了所有空间（列）。但是，根据您的定义，第一行中应该只包含一列

*{
保证金：0；
填充：0；
}
.纸张部{
边框宽度：5px；
边框颜色：黑色；
边界：双；
}
/* https://www.youtube.com/watch?v=HgwCeNVPlo0 */
.服务器{
网格区域：服务器；
}
.头衔{
网格区域：标题；
}
.标志{
网格区域：标志；
}
.谁{
网格区域：世卫组织；
}
.什么{
网格区域：什么；
}
toWho先生{
网格区域：toWho；
}
.纸张{
显示：网格；
网格模板列：1fr 40px 200px 200px 40px 1fr；
网格模板行：1fr 1fr 1fr 1fr 1fr；
网格模板区域：
“.logo title服务器。”
“…服务器。”
“谁，谁。”
“toWho toWho toWho toWho”
“什么，什么。”；
}

服务器
标题文本
标志
谁
什么
托沃

ohh我现在明白你的意思了。这确实有道理。那么，如果我想在下面的行中显示相同的图标，但不连接，该怎么办？我需要为它创建一个新类吗？可能需要。因为在第一行中使用了

server

。如果要在其他行中使用它，并且它引用自身（就像在我的代码中一样，它引用自身，但又添加了一个rowspan），那么它就是在破坏网格（您的DOM中只有

server

实例）。