Сохранение ширины и высоты повернутых квадратных элементов в сетке CSS (адаптивное решение)

Question

Я пытаюсь поддерживать одинаковую высоту и ширину моих квадратных делений с помощью CSS-сетки на разных устройствах.Я повернул сетку, пытаясь создать форму 'diamond' , но эта форма изменяется при изменении размера экрана.Как сохранить постоянную идеальную ширину и высоту повернутого квадрата в моей сетке, где контейнер занимает всю высоту и ширину области просмотра?

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  transform: rotate(45deg);
  overflow: hidden;
}

.grid>div {
  border: solid 1px red;
}

.container {
  width: 100%;
}

.grid {
  width: 100%;
  height: 100vh;
}

<div class="container">
  <div class="grid">
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
  </div>
</div>

Answer 1

Поскольку вы вращаете элемент 45deg, ширина / высота должна соответствовать следующей формуле: height = width = 50vh / cos(45deg) = 50vh / 0.707.Вам также нужно отрегулировать transform-origin и добавить небольшой перевод, чтобы исправить положение:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  transform: translateY(-29%) rotate(45deg);
  transform-origin:bottom left;
  overflow: hidden;
  width:calc(50vh/0.707);
  height:calc(50vh/0.707);
}

.grid>div {
  border: solid 1px red;
}

body {
  margin: 0;
    overflow: hidden;
}

<div class="grid">
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
    <div>
      box
    </div>
  </div>

translateY(-29%) - перемещение нижнего левого начала координат в центр левогокрай до поворота:

Синее расстояние равно 50vh - (100vh - Width) = 50vh - 100vh + 50vh/0.707 = 50vh*(1 + 1.414) - 50vh*2 = 0.414*50vh

, и если мы разделим этот результат с шириной(0.414/1.414) у нас есть 29%.