使用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，超出后自动换行并均分剩余空间。
请注意以下说明:1、本程序允许任何人免费使用。2、本程序采用PHP+MYSQL架构编写。并且经过ZEND加密，所以运行环境需要有ZEND引擎支持。3、需要售后服务的，请与本作者联系，联系方式见下方。4、本程序还可以与您的网站想整合，可以实现用户在线服务功能，可以让客户管理自己的信息，可以查询自己的订单状况。以及返点信息等相关客户利益的信息。这个功能可提高客户的向心度。安装方法：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 就能快速构建灵活布局。
