CSS网格布局：是否可以使其中一项宽度超过网格100％？

Question

我正在寻找一种方法来使其中一个网格项目的宽度为100％，但我不知道这是否可能首先是宽度CSS网格布局。

这是我要实现的布局图。

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

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

Answer 1

您应该将整个页面设为.container，然后再添加2列：

1. 左侧

2. 右侧

[两者都应将其width设置为auto或1fr（而其他12列应具有预定义的width）。

然后您应为要以某种方式定位的所有网格项目添加“间隔符”。