Как создать квадраты переменной ширины, используя сетку CSS? - PullRequest
Новая
       0

Как создать квадраты переменной ширины, используя сетку CSS?

0 голосов
/ 13 мая 2018

Есть ли способ иметь ячейки сетки, ширина которых основана на единицах fr, которые динамически регулируют их высоту, чтобы они оставались квадратными?

Кроме того, я надеялся сделать это без JS

Ниже приведен пример кода.Div с классом 'sqaure' - это те, которые я хочу динамически регулировать по высоте, чтобы соответствовать их ширине (которая равна 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>

1 Ответ

0 голосов
/ 16 мая 2018

Вам необходимо:

  1. определить ширину .square; и
  2. убедитесь, что высота .square равна этой ширине.

Вы можете определить ширину .square с помощью одной строки JavaScript: 

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

Вы можете убедиться, что высота .square равна этой ширине с двумя строками JavaScript: 

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