如何指定网格中允许的列数

Question

我希望使网格以总宽度为1甚至列数的方式工作。所有列都应以最小宽度缠绕为一，然后随着宽度的增加缠绕为2、4列。
我想避免在某些宽度上有三列两行而第二行确实只有一个最后一个元素的情况。看起来不太好。

<div class="info">
    <div><i class="material-icons">location_on</i>Address</div>
    <div><i class="material-icons">call</i>Phone</div>
    <div><i class="material-icons">email</i>Email</div>
    <div><i class="material-icons">public</i>Web</div>
</div>

.info {
    display: grid;
    text-align: center;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 400px);
    grid-gap: 0px 0px;
}