为所有CSS网格行设置固定高度
当我构建100Ideas时，有一个小要求，当元素动态增加时，它不应该影响网格的布局，网格元素的行和列的高度应该是固定的。
之前：
优化后：
代码 超文本标记语言
<div className='container'>
<div className='content'>
<div className='item'/>
<div className='item'/>
</div>
</div>CSS设置grid-auto-rows就可以解决问题
.content {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: 10rem; // this does the trick
grid-gap: 2% 2%
}本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2024-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录