时间戳

首页 > 解决方案 > 如何调整 CSS 网格项元素？如何设置与宽度相同的高度？

css - 如何调整 CSS 网格项元素？如何设置与宽度相同的高度？

问题描述

我想知道是否有可能有一个从网格列 1 过度拉伸到网格列 5 的平方CSS 网格项（例如）。我怎样才能用这个网格项元素制作一个正方形？

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/

标签： cssgridcss-grid

解决方案

您可以使用 jquery 来实现这一点。前任

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

推荐阅读