css布使用固定布局和遍历div
如图所示，有一个大的div固定在第一个位置，里面有若干个通过for循环生成的div，编号为1、2、3、4。
解决方案
使用css的grid布局可以完美解决这个问题。
立即学习“前端免费学习笔记（深入）”；
html结构
固定不动其他1其他2其他3其他4其他5其他6其他7
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;}
效果
采用grid布局后，固定不动的div将占据两行一列，而其他div会自动排列在下面。
+-------------+-------+| 固定不动 | 1 || +-------++-------------+ 2 | +-------+ 3 | +-------+ 4 | +-------+ 5 | +-------+
以上就是如何用CSS Grid布局实现首个div固定位置，其他div自动排列？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632283.html
微信扫一扫 
支付宝扫一扫 
