Question

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

另外，我希望这样做没有JS

下面的小提琴有一些示例代码。与班级＆＃39; sqaure＆＃39;我想动态调整它们的高度以匹配它们的宽度（这是1fr所以它改变）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

你需要：

确定var RandomObject = {}; RandomObject.array = []; console.log(RandomObject); delete RandomObject.array; console.log(RandomObject);的宽度;和
确保.square的高度等于该宽度。

您可以使用一行javascript来识别.square的宽度：

.square

您可以使用两行javascript确保var squareWidth = document.getElementsByClassName('square')[0].offsetWidth;的高度等于该宽度：

.square

工作示例：

＆＃13;

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

＆＃13;

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);

＆＃13;

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

＆＃13;

如何使用css网格布局创建可变宽度方块？

1 个答案: