Grid布局实现元素集合整体space-around但最后一行左对齐的效果

用卡片展示列表数据时，我们希望呈现的效果是，卡片按顺序一行一行排列，整体居中且间隔可以自适应。如果按照flex布局的思路，给flex容器设置justify-content: space-around后的效果是这样的：

最后一行也居中了，但是我们其实希望最后一行在没有填满行宽的时候是左对齐的。这个需求可以用Grid布局实现，css代码如下：

.container { 
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 240px); // 卡片固定宽度240px
    grid-gap: 20px;
} 

最后实现效果：