如何实现 grid 布局顶部对齐？
你在使用 grid 创建页面布局时遇到一个问题，即中间和右侧的内容没有顶部对齐，如下所示：
%ign%ignore_a_1%re_pre_1%你想要的结果是：
1 3 62 4 7 5
代码如下：
移动端UI&微信UI YDUI Touch
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
81 查看详情
hello1hello2hello3hello4hello5hello6hello7
.fruit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start;}.fruit { width: 100%; margin-bottom: 10px;}/* 显示在最左 */.fruit:nth-child(1),.fruit:nth-child(2) { grid-column: 1;}/* 显示在中间 */.fruit:nth-child(3),.fruit:nth-child(4),.fruit:nth-child(5) { grid-column: 2;}/* 显示在最右 */.fruit:nth-child(6),.fruit:nth-child(7) { grid-column: 3;}
解决这个问题的关键是添加 grid-auto-flow: dense 到 .fruit-grid。此属性使元素尽可能使用前面空的网格，而不是产生新的网格。
修改后的代码如下：
.fruit-grid { ... grid-auto-flow: dense;}
加了这条语句后，你的布局将以你想要的形式正确对齐：
1 3 62 4 7 5
以上就是如何使用 Grid 布局实现顶部对齐？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1157762.html
微信扫一扫 
支付宝扫一扫 
