0

I am wondering if it is possible to have a squared css grid-item that overstretches (for example) from grid-column 1 to grid-column 5. How can I make a square out of this grid item element?

HTML would be something like this: 

<div class="wrap">
  <div class="squared">
    This blue element should be a square.<br/>
    Same height as width. 
  </div>
</div>

And CSS: 

.wrap{
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}

.squared{
  background-color: blue;
  grid-column-start: 2;
  grid-column-end: 5;
}

I have prepared a JSFiddle: https://jsfiddle.net/b8utkf21/

iMax
  • 547
  • 1
  • 8
  • 18

1 Answers1

-1

you can use jquery to achieve this. e.x.

var cw = $('.squared').width();
$('.wrap').css({'height':cw+'px'});
T_Ix
  • 66
  • 8
  • True. But I would prefer a solution without JavaScript. – iMax Jan 09 '20 at 15:28
  • @iMax Because of the way you are using relative widths in a max-width box that is not the width of the viewport, this is about the only way you will find to do this – Libra Jan 09 '20 at 15:40