CSS网格-您可以约束自动列吗? [英] CSS Grid - can you constrain auto column?

问题描述

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

I have a design consisting of 4 columns using CSS Grid. The css definition is:

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

两个450px的中心列都有div，其中包含一些功能文字&登陆页面的相关图像.而auto列仅填充页面的宽度.

The two 450px centre columns have divs with some feature text & a related image respectively for a landing page. And the auto columns simply fill out the width of the page.

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

However, in the design the last feature image overflows the second 450px column and flows to the edge of the page. I have tried to:

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

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

Is there a way that I can col span into the right hand auto column but not have the column grow to encompass the entire image?

推荐答案

下面的方法可以计算出第四列的宽度:

The following works as it calculates what the width of the 4th column would be:

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

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

and on the last feature image spans 2 columns:

grid-column: span 2;

这篇关于CSS网格-您可以约束自动列吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！