文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
grid-template-rows: Repeat(auto-fill, 80px) 可以与 grid-auto-rows: 80px 互换使用吗？
P粉823268006
P粉823268006 2023-09-12 21:10:45
[CSS3讨论组]
0 1 658
举报

我希望网格在添加动态内容时根据需要添加更多行。

这就能解决问题：

.grid {
  display: grid;
  grid-template-rows: 80px;
  grid-auto-rows: 80px;
//  grid-template-rows: repeat(auto-fill, 80px);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  grid-gap: 60px 60px;
}

我想知道是否可以使用grid-template-rows:repeat(auto-fill, 80px);来代替grid-auto-rows: 80px ？

P粉823268006
P粉823268006

全部回复(1)
P粉627136450
P粉6271364502023-09-13 13:02:46 1楼

嗯，grid-template-rows: Repeat(auto-fill, 80px); 是根据 规范，但它没有给出所需的结果。相反，它只是创建一个高度为 80 像素的显式行，并且其他行会自动调整大小。

但是，由于您希望根据需要添加行，即隐式创建的网格行，因此您应该使用 grid-auto-rows 并且无需使用grid-template-rows。 

.grid {
  display: grid;
  grid-auto-rows: 80px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 60px;
  }

.grid div {
  background-color: silver;
}
<div class="grid">
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
</div>
赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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

  • PHP学习

  • 技术支持

  • 返回顶部