如何实现 grid 布局顶部对齐
在使用 grid 布局时，您想将 grid 项顶部对齐，但遇到了问题。让我们查看您的代码：
这段代码将元素分为三列：
.fruit-grid { grid-template-columns: repeat(3, 1fr);}
然后，您使用了 nth-child 选择器将元素移动到特定列中：
.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 项占据了它们自己的行并向下移动。
解决方案
使用 grid-auto-flow: dense 属性可以解决此问题。此属性会使元素尽可能使用前面空的网格，而不是产生新的。
.fruit-grid { grid-auto-flow: dense;}
现在，grid 项应该顶部对齐，就像您想要的那样。
以上就是使用 grid 布局如何实现顶部对齐？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632371.html
微信扫一扫 
支付宝扫一扫 
