分享前端常见的几种列表自适应排列方式，使用grid布局。这几种情况都不太好用flex实现，一般需要配合js，使用grid可以完全用css实现。场景1.卡片宽固定+页面的左右padding固定+一行显示的卡片个数自适应+卡片之间的左右留白间隙不固定场景2.页面的左右padding固定+卡片之间的左右留白间隙固定+一行显示的卡片个数固定+卡片宽自适应（该展示方式有一个缺陷，就是卡片宽度是百分比，在特别宽的屏幕上会很扁，再比如把浏览器强制缩小比例）场景3.卡片宽固定+卡片之间的左右留白间隙固定+一行显示的卡片个数自适应+页面的左右padding不固定且内容区在水平方向居中场景1在不同宽度屏幕下的自适应效果： ![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e7b487df2194f40b361621c686044be~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab01ed9769764cc88afa3f6e914ab227~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a5d03ab017b4a3fb6ce9b51a5dfada3~tplv-k3u1fbpfcp-watermark.image?) 代码实现： ``` // html

// css .container { border: 1px dashed; // 下面是重点 display: grid; grid-template-columns: repeat(auto-fill, 200px); // 自动填充一行的卡片个数 justify-content: space-between; // 卡片两端对齐，与flex的该属于一致 } ``` 场景2在不同宽度屏幕下的自适应效果： ![图片.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c53fa18ad7ab46fb815764ec43bad48d~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff2b628842b8424e9f42ca5479b5c59e~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b463f83f547546b88b7bb9d654f47021~tplv-k3u1fbpfcp-watermark.image?) 代码实现： ``` // html

// css .container { border: 1px dashed; // 下面是重点 display: grid; grid-template-columns: repeat(auto-fill, calc((100% - 60px) / 4)); // 一行排列4个卡片，卡片之间的空隙是20px，所以每个卡片的宽度为60px是(100% - 60px) / 4) } ``` 场景3在不同宽度屏幕下的自适应效果： ![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7f30471e30e4631a57756c7f3ea3850~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8e79f1e892e475d9e758e0f9585e0c0~tplv-k3u1fbpfcp-watermark.image?) ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1228d2057b6847ffb0a9321b6badb85c~tplv-k3u1fbpfcp-watermark.image?) 代码实现： ``` // html

// css .container { border: 1px dashed; display: grid; // 下面是重点 grid-gap: 20px; // 卡片左右间隙 grid-template-columns: repeat(auto-fill, 200px); // 自动填充一行的卡片个数 justify-content: center; // 每行的卡片整体居中，但最后一行如果没有填充满会左对齐 } ```