CSS grid layout: Is it possible to make one of items 100% width over the grid?

Question

I am looking for a way to make one of the grid items 100% width, but I don't know if this is possible width CSS grid layout in the first place.

Here's an image of the layout I'm trying to achieve.

There's a container with the width of "1040px" and there's a grid inside, where the number of columns is 12. The text part with the white background takes up the 6 columns, and as you can see, both the images take up 8 columns in the grid. What I want to achieve here is that they overflow the grid and fit the window size.

Is there any way to achieve this with CSS grid layout? Thank you.

Answer 1

You should make a whole page a .container and then add 2 more columns:

1. Left side

2. Right side

Both of which should have their width set either to auto or 1fr (and the other 12 columns should have predefined width).

Then you should add "spacers" for all the grid items that you want positioned in certain way.

---

In the end you will have 14 columns, where left and right ones have different width.
You shouldn't try to "get out of grid", you should just set the grid to your liking.