CSS Grid - 你能约束自动列吗？

Question

我有一个使用 CSS Grid 的由 4 列组成的设计。 css定义为：

display: grid;
grid-template-columns: auto 450px 450px auto;

两个 450 像素的中心列具有 div，其中包含一些功能文本和相关图像，分别用于登录页面。而auto 列只是填写了页面的宽度。

但是，在设计中，最后一个特征图溢出了第二个 450px 列并流到了页面的边缘。我尝试过：

• col 将图像跨过第二个 450px 列和 auto 列，但它会将第一个 auto 列压缩到更小的宽度。

有没有一种方法可以让我跨入右侧的auto 列，但不能让该列增长到包含整个图像？

Answer 1

在计算第 4 列的宽度时，以下方法起作用：

display: grid;
grid-template-columns: auto 450px 450px calc((100vw - 900px)/2);

最后一张特征图跨越 2 列：

grid-column: span 2;