flex弹性盒实现从左到右对齐痛点

当我们使用flex弹性盒布局时

右边留出来了很多空白，很难看，这时当我们用到
justify-content: space-evenly;时

能实现较为美观的效果，可是如果我调动屏幕大小时，或者说是数量不确定时。则会出现以下效果，不能从左到右开始排，无论是space-between；还是sapce-around；效果都无法实现

如果你的屏幕是固定的列数，你可以通过计算margin的值来进行。但如果你的列数不固定的话：那就使用以下的办法吧：
.grid{
grid-template-columns: repeat(auto-fill, 200px);
gap: 10px;
justify-content: space-between;
}
.grid div{
background-color: aqua;
display: grid;
height: 200px;
}