CSS 网格正方形布局

Question

我正在尝试创建由正方形组成的网格/布局。每行四个正方形。正方形不能在屏幕调整大小时扭曲。宽度和高度必须始终相同（我不想要固定值）。我必须使用 CSS 网格。谁能帮我 ？

 .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
}

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

原文由 Minio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

仅使用 CSS，您可以使用伪元素始终保持纵横比为 1:1 或使用新的 aspect-ratio 属性，例如

 .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

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

原文由 Fabrizio Calderan 发布，翻译遵循 CC BY-SA 4.0 许可协议