我想要一个具有任意数量的网格项的网格布局,当一个网格项被填充时,它会自动创建一个新行,有点像:
#grid {
display: grid;
width: 256px;
border: 1px solid black;
grid-gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
}
#grid span {
background-color: lightgray;
}
content 1 content 2 content 3 content 4 content 5 content 6 content 7 content 8 content 9 content 10
问题是我不想对 75px 进行硬编码。 有没有办法将该值设置为“最宽网格项的内容宽度”?
我尝试将 75px 更改为 min-content,这似乎可以按照规范工作,但开发工具说这是无效的 CSS。我还尝试过仅设置 grid-auto-columns: min-content 而不是 grid-template-columns,这似乎正确设置了宽度,但每个网格项占用了一整行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号