CSS 网格布局,自动添加行并将列宽度设置为最大网格项目宽度
P粉818317410
P粉818317410 2024-03-28 11:13:36
[CSS3讨论组]

我想要一个具有任意数量的网格项的网格布局,当一个网格项被填充时,它会自动创建一个新行,有点像:

#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,这似乎正确设置了宽度,但每个网格项占用了一整行。

P粉818317410
P粉818317410

全部回复(0)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号