CSS Grid - can you constrain auto column?

Question

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

display: grid;
grid-template-columns: auto 450px 450px 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.

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 span the image over the second 450px column and the auto column but it squeezes the first auto column to a much smaller width.

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?

Answer 1

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);

and on the last feature image spans 2 columns:

grid-column: span 2;