-1

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>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118
  • start by removing the comma inside your templates, we use only space there – Temani Afif Oct 03 '22 at 14:37
  • and when using 6fr it doesn't mean 6 columns but only 1 column so you have 3 columns but using 13 as column-end – Temani Afif Oct 03 '22 at 14:38
  • It's a 12 cols grid. It's a way to retain relative widths. Anyway, that's not the point of my question. – Luca Reghellin Oct 03 '22 at 14:39
  • it's *the* point of your question. If you correctly define 12 cols then your code will work fine. Actually you are defining 3 columns and using 12 columns so the browser will logically and automatically set the width of the column based on their content since your are not defining their width – Temani Afif Oct 03 '22 at 14:42
  • Interesting. I'll give it a try. – Luca Reghellin Oct 03 '22 at 14:50
  • Great, thank you, it works: would you like to add a real answer or do you prefer I'll do it for you? – Luca Reghellin Oct 03 '22 at 14:52
  • `//` is [not a valid comment character sequence in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) (the browser will most likely terminate processing the CSS from that point on). Only the C style `/* */` is valid. From the source (my emphasis): *"The `/* */` comment syntax is used for both single and multiline comments. There is* ***no other way*** *to specify comments in external style sheets."* – Peter Mortensen Dec 31 '22 at 01:17
  • See also *[Why do /**/ comments work in stylesheets but // comments don't?](https://stackoverflow.com/questions/2479351/why-do-comments-work-in-stylesheets-but-comments-dont)* – Peter Mortensen Dec 31 '22 at 01:31

1 Answers1

0

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>
colmo007
  • 38
  • 6