CSS网格-您可以限制自动列吗？

Question

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

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

两个450px的中心列具有div，分别包含着陆页的某些功能文本和相关图像。 auto列仅填充页面的宽度。

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

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

有没有一种方法可以使我跨过右边的auto列，但又不能使该列增长为包含整个图像？

Answer 1

以下内容可以计算第四列的宽度：

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

并且在最后一个特征图像上跨越2列：

grid-column: span 2;