使用 grid-template-columns 配合 repeat() 和 fr 单位可实现等宽列布局，如 repeat(3, 1fr) 创建三等分列；通过 minmax() 与 auto-fit 可实现响应式自适应，如 repeat(auto-fit, minmax(200px, 1fr)) 保证最小宽度并自动调整列数；结合 gap 属性可安全添加间距而不破坏等分结构，适用于卡片、表单等场景。
要使用 CSS Grid 实现等宽列排列，核心是利用 grid-template-columns 属性配合重复函数和等分单位。这种方式简洁、灵活，适用于各种栅格布局场景。
基本语法：使用 repeat() 和 fr 单位
最常用的方法是结合 repeat() 函数与 fr（fraction）单位来定义等宽列。
例如，创建 3 列等宽布局：
.container { display: grid; grid-template-columns: repeat(3, 1fr);}
这表示容器被分为 3 列，每列占据相等的可用空间。
固定列数的等宽列
如果你明确知道需要多少列，可以直接指定数量。
立即学习“前端免费学习笔记（深入）”；
4 等分列： grid-template-columns: repeat(4, 1fr); 2 等分列： grid-template-columns: 1fr 1fr; 或 repeat(2, 1fr)
所有列将自动平均分配容器宽度，无论内容多少。
响应式等宽列（自适应）
结合 minmax() 可实现更智能的响应式等宽列，避免换行或溢出。
bee餐饮点餐外卖小程序
bee餐饮点餐外卖小程序是针对餐饮行业推出的一套完整的餐饮解决方案，实现了用户在线点餐下单、外卖、叫号排队、支付、配送等功能，完美的使餐饮行业更高效便捷！功能演示：1、桌号管理登录后台，左侧菜单 “桌号管理”，添加并管理你的桌号信息，添加以后在列表你将可以看到 ID 和 密钥，这两个数据用来生成桌子的二维码2、生成桌子二维码例如上面的ID为 308，密钥为 d3PiIY，那么现在去左侧菜单微信设置
1 查看详情
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
含义：
auto-fit： 自动填充列数 minmax(200px, 1fr)： 每列最小 200px，最大占 1 份空间
屏幕变窄时列数自动减少，始终保持等宽且不换行。
添加间距（gap）
使用 gap 属性设置列之间的间距，不会破坏等宽结构。
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
列宽会自动扣除间距部分，仍保持视觉上的等分效果。
基本上就这些。用 repeat(n, 1fr) 最简单直接，搭配 minmax() 和 auto-fit 能实现响应式等宽布局，适合卡片、表单、图片墙等场景。
以上就是如何用css grid实现等宽列排列的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1053767.html
微信扫一扫 
支付宝扫一扫 
