时间戳

首页 > 解决方案 > CSS网格正方形布局

html - CSS网格正方形布局

问题描述

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

标签： htmlcsscss-grid

解决方案

仅使用 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>

推荐阅读