如何使用 CSS 网格布局创建可变宽度的正方形？

Question

有没有办法让宽度基于 fr 单位的网格单元格动态调整它们的高度以保持正方形？

另外，我希望做到这一点没有 JS

下面的小提琴有一些示例代码。具有“sqaure”类的 div 是我想要动态调整它们的高度以匹配它们的宽度（这是 1fr 所以它会改变）

https://jsfiddle.net/bpk0sLvL/403/

.holder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4px;
  row-gap: 4px;
}

.box {
  background-color: #ccc;
}

.wide {
  grid-column-start: 1;
  grid-column-end: 3;
}

<div class="holder">
  <div class="box wide">
    <p>This can be any height</p>
    <p>All these divs are sized based on fr, so I want to have the two square divs stay square as they dynamically resize </p>
  </div>
  <div class="box sqaure">
    This needs to be a sqaure
  </div>
  <div class="box sqaure">
    This needs to be a square as well
  </div>
</div>

Answer 1

你需要：

1. 识别.square的宽度；和
2. 确保.square 的高度等于该宽度。

一行javascript就可以识别.square的宽度：

var squareWidth = document.getElementsByClassName('square')[0].offsetWidth;

你可以用两行javascript确保.square的高度等于那个宽度：

var holder = document.getElementsByClassName('holder')[0];
holder.style.gridTemplateRows = 'auto ' + squareWidth + 'px';

工作示例：

function calculateSquareHeight() {

    var holder = document.getElementsByClassName('holder')[0];
    var squareWidth = document.getElementsByClassName('square')[0].offsetWidth;
    holder.style.gridTemplateRows = 'auto ' + squareWidth + 'px';
}

window.addEventListener('load', calculateSquareHeight, false);
window.addEventListener('resize', calculateSquareHeight, false);

.holder {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 4px;
grid-row-gap: 4px;
}

.box {
background-color: #ccc;
}

.wide {
grid-column-start: 1;
grid-column-end: 3;
}

<div class="holder">
<div class="box wide">
<p>This can be any height</p>
<p>All these divs are sized based on fr, so I want to have the two square divs stay square as they dynamically resize </p>
</div>

<div class="box square">
This needs to be a square
</div>

<div class="box square">
This needs to be a square as well
</div>
</div>