How to make an element overflow the grid width, widthout affecting grid cols sizes?-CodePudding

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). What I'd like to do, is insert a 50vw element on col-2, which should start from te 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 to avoid?

.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 >
  <div >col 1</div>
  <div >
    col 2<br>
    <!-- <div >inner</div> (should be 50vw) -->
  </div>
</div>

CodePudding user response：

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 >
  <div >col 1</div>
  <div >
    <div >inner</div>
    col 2
  </div>
</div>

CodePudding user response：

Thanks to @Temani Afif, I get to what I wanted like this:

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

.grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr 4fr 1fr;
  
  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 >
  <div >col 1</div>
  <div >
    col 2<br>
    <div >inner (50vw)</div>
  </div>
</div>