grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
时间: 2024-05-20 17:16:12 浏览: 12
This grid-template-columns property will create a grid with columns that have a minimum width of 300px and a maximum width of 1fr, which means the columns will take up equal amounts of remaining space. The auto-fit function will automatically adjust the number of columns based on the width of the container, so that as the container shrinks, the number of columns will decrease and the column width will increase, maintaining the minimum width of 300px. This is useful for creating responsive layouts that adjust to different screen sizes.
相关问题
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
这是一个 CSS 属性,用于定义网格布局中列的大小和数量。其中,`auto-fit` 表示自动填充,`minmax(200px, 1fr)` 表示列的最小宽度为 200px,最大宽度为 1fr(即剩余空间的比例分配)。这样设置可以使列自适应容器的大小,并且最小宽度为 200px,同时保证布局的平衡性。
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; 这是我的代码 我发现每个格子的大小不对
如果每个格子的大小不对,可能是因为你的容器宽度不够,导致每个格子的宽度被压缩。你可以尝试调整容器的宽度,或者通过调整 `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 */
}
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)