Html 图像将所有其他列推到一边？

我在向网格布局添加图像时遇到问题。我正在尝试学习如何使用网格，我已经拥有了我想要的所有列和行，但是当我添加一个图像时，它并不适合它应该的样子！它把其他所有的列队都赶走了。 我做错了什么？很抱歉，代码还没有速记版本，我是通过先把所有内容都写出来来学习的，这样我就能100%理解我输入的内容。当一切正常时，我会把它缩短，这是一种学习过程！；）从W3获得模板

.main{
最大高度：90vh；
}
.item1{网格列：1/span 11；}
.item2{网格列：12/span 2；}
.item3{网格列：14/span 11；}
.item4{网格列：1/span 6；}
.item5{网格列：7/span 6；}
.item6{网格列：13/span 6；}
.item7{网格列：19/span 6；}
.item8{网格列：1/span 24；}
.网格容器{
显示：网格；
网格模板列：自动；
网格模板行：15vh 75vh 10vh；
网格间距：1px；
背景色：#2196F3；
填充：10px；
}
.grid容器>div{
背景色：rgba（255、255、255、0.8）；
填充：20px0；
字体大小：30px；
溢出：隐藏；
}
#左标题{
宽度：30%；
对齐内容：柔性端；
}

网站组合
2.
3.
4.
5.
6.
7.
8.

能否为图像添加完全限定的路径？您的示例中没有显示它。

grid column

的问题是它总是会根据其他div的内部内容重新计算所占用的空间。说

.item1

将

网格列：1/span 11

并不一定意味着它将占用网格中的确切“十一个空格”，但在一般网格中，它将跨越11列，具体取决于其他网格所跨越的内容。试着在

item1

中写一个长文本，看看其他div将如何变小。我很惊讶这一切都能奏效。您当前有

网格模板列

设置为有24个不同的列。啊哈，好的！我想那样的话，我就从头开始。我在某个地方读到，你应该使用12列网格或24列网格，这样你就可以更好地控制页面。结果证明这是错误的哈，哦。谢谢山姆少校的回答，我明白了！：）