使用CSS Grid可轻松实现等宽列和等高行。通过display: grid设置容器，用grid-template-columns结合fr单位或repeat()函数定义等宽列，如repeat(3, 1fr)创建三等宽列，或使用minmax()实现响应式自适应列；同一行内网格项默认等高，无需额外设置，内容不同时也会自动拉伸对齐高度。示例中3列布局每项均分宽度，各行根据内容自动调整并保持等高，gap属性添加间距，整体布局灵活且无需JavaScript干预。
使用 CSS Grid 实现等宽列和等高行非常直接，只需要合理设置 grid-template-columns 和容器的 display: grid 属性即可。下面分步说明如何实现。
1. 设置等宽列
要让所有列宽度相等，可以使用 fr 单位或 repeat() 函数配合 auto-fit 或固定数量。
示例：创建 3 个等宽列
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */}
或者更简洁地写成：
立即学习“前端免费学习笔记（深入）”；
.container { display: grid; grid-template-columns: repeat(3, 1fr);}
如果希望列数自适应容器宽度，可以用：
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
这样每列最小 200px，超出后自动换行并均分剩余空间。
bee餐饮点餐外卖小程序
bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和 密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置
1 查看详情
2. 实现等高行
CSS Grid 默认会让同一行中的网格项（grid items）高度一致，也就是“等高行”。只要父容器是 display: grid，子元素会自动拉伸填满所在行的高度。
示例：两行内容不等但高度一致
.container { display: grid; grid-template-rows: auto auto; /* 行高由内容决定，但同行动态等高 */ gap: 10px;}.item {background: #eee;padding: 20px;}
即使某个格子内容较少，它仍会与同行中内容最多的格子保持相同高度。
3. 完整示例：3列等宽 + 自动等高行
结合上面两点，一个典型的布局代码如下：
内容1内容2很长很长...内容3内容4内容5内容6
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); /* 三等分宽度 */ gap: 16px;}.item {background-color: #f0f8ff;padding: 20px;border: 1px solid #ccc;}
在这个例子中，每行最多显示 3 个等宽项，且每行中的项目高度自动对齐。
基本上就这些。Grid 的强大之处在于它天然支持等宽列和等高行，无需额外计算或 JavaScript 干预。掌握 fr、repeat() 和 grid-template-columns/rows 就能快速构建灵活布局。
以上就是如何用css grid实现等宽列与等高行的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1031597.html
微信扫一扫 
支付宝扫一扫 
