How can I make an element overflow the grid width, without affecting grid columns sizes?

Question

Please see the following snippet.

I've got a basic grid layout with overlapping cells (but in this case the overlapping thing doesn't matter). I'd like to insert a 50vw element on col-2 , which should start from the center of the screen (current col-2 starting point) and go to the end of the screen, overflowing the cell itself.

If I try to do it, it will not work. Instead, it will modify all the cells current sizes. How can I avoid it?

 .grid{ display:grid; //grid-template-columns: 6fr 2fr 4fr; grid-template-columns: 6fr 2fr minmax(0, 4fr); grid-template-rows: 1fr 4fr 1fr; min-width: 0; width: 60%; margin: 0 auto; background-color: rgba(255, 255, 0, .5); }.column{ min-height: 100px; }.col-1{ grid-column-start: 1; grid-column-end: 9; grid-row-start: 2; grid-row-end: 4; background-color: rgba(255, 0, 255, .5); z-index: 10; }.col-2{ grid-column-start: 7; grid-column-end: 13; grid-row-start: 1; grid-row-end: 3; background-color: rgba(0, 255, 255, .5); }.inner{ width: 50vw; background-color: rgba(0, 0, 200, .5); }

 <div class="grid"> <div class="column col-1">col 1</div> <div class="column col-2"> col 2<br> <!-- <div class="inner">inner</div> (should be 50vw) --> </div> </div>

Answer 1

Did you mean this?

 body, html{ margin: 0; }.grid{ display:grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr 4fr 1fr; min-width: 0; width: 100%; background-color: rgba(255, 255, 0, .5); }.column{ min-height: 100px; }.col-1{ grid-column-start: 1; grid-column-end: 9; grid-row-start: 2; grid-row-end: 4; background-color: rgba(255, 0, 255, .5); z-index: 10; }.col-2{ grid-column-start: 7; grid-column-end: 13; grid-row-start: 1; grid-row-end: 3; background-color: rgba(0, 255, 255, .5); }.inner{ width: 50vw; background-color: rgba(0, 0, 200, .5); }

 <div class="grid"> <div class="column col-1">col 1</div> <div class="column col-2"> <div class="inner">inner</div> col 2 </div> </div>