flex: 1; background-color: rebeccapurple; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); grid-template-rows: repeat(auto-fit, minmax(64px, 1fr)); /* 可选,设置网格之间的间距 */ grid-gap: 4px; 这是我的代码 我发现每个格子的大小不对
时间: 2024-02-10 12:03:54 浏览: 28
如果每个格子的大小不对,可能是因为你的容器宽度不够,导致每个格子的宽度被压缩。你可以尝试调整容器的宽度,或者通过调整 `minmax` 函数的最小值来达到更好的效果。
另外,如果你想保持每个格子的宽高比例,可以使用 `aspect-ratio` 属性,例如:
```css
.container > div {
aspect-ratio: 9 / 16; /* 宽高比例为 9:16 */
}
```
这样每个格子的宽高比例就会保持不变,而且不会被压缩变形。完整代码如下:
```html
<div class="container">
<div></div>
<div></div>
<div></div>
<!-- 其他格子 -->
</div>
```
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%; /* 可根据需要调整容器宽度 */
}
.container > div {
flex: 1;
background-color: rebeccapurple;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(64px, 1fr));
grid-gap: 4px; /* 可选,设置网格之间的间距 */
aspect-ratio: 9 / 16; /* 宽高比例为 9:16 */
}
```