квадраты по высоте (не по ширине), чтобы создать равную ширину (соотношение сторон)

Question

Я знаю квадратное решение с :before { padding-bottom }.Это работает только со значением ширины, потому что заполнение всегда использует отношение к родительской ширине.- Но именно это моя проблема.

У меня ТОЛЬКО значение фиксированного ВЫСОТА (по родительскому контейнеру), и мне нужно квадратики по этому значению высоты.Я не люблю использовать JS.Если есть решение для REPLACE значения STATIC WIDTH с чистым CSS, пожалуйста, скажите мне!

Вот простой пример кода:

div.wrapper {
  height: 70px;
  padding: 5px;
  background: black;
}

div.box {
  float: left;
  width: calc(70px - 10px); /* here is that static value for width, but better would be a relation to (parent) height */
  height: calc(100% - 10px);
  margin: 5px;
 }

div.box.b1 {
  background: orange;
}

div.box.b2 {
  background: red;
}

div.box.b3 {
  background: green;
}

div.box.b4 {
  background: dodgerblue;
}

div.box.b5 {
  float: right;
  background: grey;
}

<div class="wrapper">
  <div class="box b1">A</div>
  <div class="box b2">B</div>
  <div class="box b3">C</div>
  <div class="box b4">D</div>
  <div class="box b5">E</div>
</div>

Я также искал "сетку css-3", но не нашел хорошего решения.Но если кто-то знает о проблеме, пожалуйста, скажите мне!:)

PS: Просто для информации ... Ширина родителя всегда равна 100% (или vw).Я хочу создать панель навигации с определенной высотой, которая может быть изменена с помощью медиа-запросов.Но только значение высоты, а не значение ширины родительского контейнера.

PPS: Я нашел здесь еще один вопрос об этой проблеме, но никто не понимал тех, кто его запрашивал.Поскольку мы не ищем «var height = width», мы ищем «var width = height».;)

Answer 1

Хорошо, я нашел способ с сеткой и css-переменными ...

:root {
  --box-spacing: 10px;
  --box-length: 60px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, var(--box-length)) auto var(--box-length);
  grid-auto-rows: var(--box-length);
  grid-template-areas: 
    "a b c d . e";
  grid-gap: var(--box-spacing);
  padding: var(--box-spacing);
  background:black;
}

.grid > :nth-child(1) {
  grid-area: a;
  background:orange;
}

.grid > :nth-child(2) {
  grid-area: b;
  background:red;
}

.grid > :nth-child(3) {
  grid-area: c;
  background:green;
}

.grid > :nth-child(4) {
  grid-area: d;
  background:blue;
}

.grid > :nth-child(5) {
  grid-area: e;
  background:grey;
}

<div class="grid">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>

Я просто использую один и тот же var () для ширины и длины длины.И grid-template-areas позволяет использовать . для пустого столбца на пятой позиции.Эта колонка имеет автоматическую ширину.

Это не красота, но она работает ... если у вас есть лучшее решение, скажите мне!:)