Sass/CSS 网格和相同的高度/宽度答案

【问题标题】：Sass/CSS Grid and same height/widthSass/CSS 网格和相同的高度/宽度
【发布时间】：2013-02-04 11:14:43
【问题描述】：

我已经定义了一个列宽以适合我想要的内容的网格。

说，然后我希望使用网格放置一个元素，所以我让它跨越 9 列中的 3 列，宽度约为 33.3%

然后我希望该元素的高度与其宽度相同。

这是我一直卡住的地方。如果我使用 Compass Susy 的 columns() 函数，它会将高度设置为 33.3%，这正是它的本意，但显然这不是我想要的。

人们如何解决这个问题以获得预期的结果？

亲切的问候，尼尔

【问题讨论】：

标签： css grid dimensions susy-compass

【解决方案1】：

不需要 JS。一个简单的 HTML 和 CSS 技巧就可以实现：

HTML

<div class="container">
<div class="item"><div class="content"></div></div>
<div class="item"><div class="content"></div></div>
<div class="item"><div class="content"></div></div>    
</div>

相关 CSS

.container{
  position: absolute;
}

.item{
    height: 0;
    position: relative;
    padding-bottom: 33%;
}

.item .content{
   height: 100%;
    width: 100%;
}

jsFiddle 示例：http://jsfiddle.net/opherv/hjVSM/

尝试调整浏览器的大小，看看它的行为。

想法是使用元素的 padding-bottom 设置宽/高比。

【讨论】：

【解决方案2】：

感谢您的回答@OpherV，但@rctneil 甚至没有提到JS。他（和我一样）正在寻找 Sass/Susy 解决方案。

是否有任何 Sass mixin 可以设置动态宽度等于其宽度的元素的高度？

【讨论】：