Question

我想知道是否可能有一个平方 css网格项目，该网格项目从（例如）从网格列1过度拉伸到网格列5。如何使用此网格项元素制作正方形？

HTML可能是这样的：

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

和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;
}

我已经准备了一个JSFiddle ：https://jsfiddle.net/b8utkf21/

Answer 1

您可以使用jquery实现此目的。

var cw = $('.squared').width();
$('.wrap').css({'height':cw+'px'});

如何平方CSS网格项元素？如何设置与宽度相同的高度？

1 个答案: