CSS网格布局：是否可以使其中一个项目在网格上100%宽度？

我正在寻找一种方法，使一个网格项目100%的宽度，但我不知道这是否是可能的宽度CSS网格布局摆在首位

这是我试图实现的布局图像

有一个宽度为“1040px”的容器，里面有一个网格，其中列数为12。白色背景的文本部分占据了6列，如您所见，两个图像都占据了网格中的8列。我想在这里实现的是，它们溢出网格并适合窗口大小

---

有什么方法可以通过CSS网格布局实现这一点吗？谢谢。

您应该将整个页面设置为

容器，然后再添加两列：

左侧

右侧

这两列的
宽度
应设置为
auto
或
1fr
（其他12列应具有预定义的
宽度
）

然后，应该为所有要以特定方式定位的网格项添加“间隔符”


最后您将有14列，其中左列和右列的宽度不同。

你不应该试图“脱离网格”，你应该根据自己的喜好设置网格。
你说的“溢出网格”是什么意思？而且这些图片不需要8列，它们跨越更宽的区域。相关：在我看来，你的网格中不需要12列，你需要14列或16列。@Temaniaf如果不需要的话。很抱歉，但我忘了在帖子中提到有一个包含网格的容器，我希望图像在仍包含8列的情况下溢出网格和容器，如图所示。我觉得多亏了你的想法，我才能到达目的地，但我不知道将图像放在哪里。根据你的方法，布局应该是1fr-12列-1fr，对吗？由于图像跨越12列-1fr，我不知道如何将图像放入布局中。好的，我刚刚看到了您的编辑。因此，就您的评论而言，无法创建布局住所。非常感谢。