SOURCE

<div class="goodscenter">
    <div class="goods">
        <img src="https://img0.baidu.com/it/u=3021476997,478649574&fm=26&fmt=auto" alt="">
            <div class="info-title">1245</div>
            <div class="info-desc">
                65656565
            </div>
    </div>
    <div class="goods">
        <img src="https://img0.baidu.com/it/u=3021476997,478649574&fm=26&fmt=auto" alt="">
            <div class="info-title">1245</div>
            <div class="info-desc">
                65656565
            </div>
    </div>
    <div class="goods">
        <img src="https://img0.baidu.com/it/u=3021476997,478649574&fm=26&fmt=auto" alt="">
        <div class="info-title">1245</div>
            <div class="info-desc">
                65656565
            </div>
    </div>
    <div class="goods">
        <img src="https://img0.baidu.com/it/u=3021476997,478649574&fm=26&fmt=auto" alt="">
        <div class="info-title">1245</div>
            <div class="info-desc">
                65656565
            </div>
    </div>
    <div class="goods">
        <img src="https://img0.baidu.com/it/u=3021476997,478649574&fm=26&fmt=auto" alt="">
        <div class="info-title">1245</div>
            <div class="info-desc">
                65656565
            </div>
    </div>
</div>

html {
    font-size: 16px; /* 不同设备大小改变显示 */
}

.goodscenter {
    display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 17rem);
  grid-gap: 10px;
}

.goods {
    max-width: 26%;
    min-width: 17rem;
}

.goods > img {
    width: 100%;
    height: auto;
}
.goods::last-child {
  margin-right: auto;
}


.info-title {
    font-weight: 600;
    font-size: 18px;
}


/* 适配小屏幕 */
@media all and (max-width:750px) {
    html{
        font-size: 8px;
    }
}