宫格布局

1、设置宫格容器

2、设置display属性为grid

3、设置grid-template-rows多少行

4、设置grid-template-columns多少列

PS:先排满列再去填充行,单位有 1fr 100px auto-fill

复制代码
        article{
            width: 300px;
            height: 400px;
            border: 5px solid #eee;
            display: grid;
            grid-template-rows:repeat(3,1fr);
            grid-template-columns:repeat(3,1fr);
        }
        div{
            background-color: #f40;
            border: 2px solid #eee;
            box-sizing: border-box;
        }
复制代码

 

 

posted @ 2020-11-04 15:17  良荣十贰  阅读(342)  评论(0)    收藏  举报
编辑推荐:
· 还在手写JSON调教大模型?.NET 9有新玩法
· 复杂业务系统线上问题排查过程
· 通过抓包,深入揭秘MCP协议底层通信
· 记一次.NET MAUI项目中绑定Android库实现硬件控制的开发经历
· 糊涂啊!这个需求居然没想到用时间轮来解决
阅读排行:
· Coze Studio:字节跳动 Coze 的开源版本来了!第一时间深度解析
· 复杂业务系统线上问题排查过程
· 在SqlSugar的开发框架的Vue3+ElementPlus前端中增加对报表模块的封装处理,实现常
· 一款超级经典复古的 Windows 9x 主题风格 Avalonia UI 控件库,满满的回忆杀!
· 我给 AI 接上了一个 C# 运行器,结果它学会了自己上网、调试代码
点击右上角即可分享
微信分享提示