如何实现固定布局和遍历 div？
如图所示，第一个 div 固定在页面顶部，后四个 div 通过 for 循环动态渲染在下方。询问如何实现此布局，以及是否有更好的解决方案。
解决方案：
grid 布局
立即学习“前端免费学习笔记（深入）”；
grid 布局非常适合解决此问题：
html 代码：
<div class="box"> <div class="box-item">固定不动</div> <div class="box-item">其他1</div> <div class="box-item">其他2</div> <div class="box-item">其他3</div> <div class="box-item">其他4</div> </div>
css 代码：
.box {
display: grid;
grid-template-columns: repeat(2, 1fr);
border: 1px solid #eee;
gap: 10px;
padding: 5px;
}
.box .box-item {
border: 1px solid #eee;
}
.box .box-item:first-child {
grid-row-start: 1;
grid-row-end: 3;
}此布局将第一个 div 固定在两行一列中，其他 div 根据 grid 规则自动排列。
效果：
[图片链接]
以上就是如何使用 CSS Grid 布局实现固定头部和动态渲染的子元素布局？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
505
收藏
