淘宝移动端首页的商品列表

商品列表

• html部分

        <!-- 商品列表 -->
        <div class="list">
            <div class="title">------ <span class="iconfont icon-xihuan"></span>你可能还喜欢 ------</div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item8.webp" alt="" />
                </div>
                <div class="detail">
                    <div class="desc">北美红雀冬青浆果欧式陶瓷餐具汤锅汤碗汤盆手绘浮雕彩绘带盖耐热</div>
                    <div class="price"><span class="iconfont icon-rmb">68</span><span class="num">55人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item8.webp" alt="" />
                </div>
                <div class="detail">
                    <div class="desc">北美红雀冬青浆果欧式陶瓷餐具汤锅汤碗汤盆手绘浮雕彩绘带盖耐热</div>
                    <div class="price"><span class="iconfont icon-rmb">68</span><span class="num">55人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item8.webp" alt="" />
                </div>
                <div class="detail">
                    <div class="desc">北美红雀冬青浆果欧式陶瓷餐具汤锅汤碗汤盆手绘浮雕彩绘带盖耐热</div>
                    <div class="price"><span class="iconfont icon-rmb">68</span><span class="num">55人已购买</span></div>
                </div>
            </div>
            <div class="unit">
                <div class="img">
                    <img src="images/items/item8.webp" alt="" />
                </div>
                <div class="detail">
                    <div class="desc">北美红雀冬青浆果欧式陶瓷餐具汤锅汤碗汤盆手绘浮雕彩绘带盖耐热</div>
                    <div class="price"><span class="iconfont icon-rmb">68</span><span class="num">55人已购买</span></div>
                </div>
            </div>
        </div>

• css部分

main .list{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 0.1rem;
    gap: 0.1rem;
}
main .list .title{
    grid-column: span 2;
    text-align: center;
    color: #ff5500;
    font-size: larger;
    padding: 0.1rem 0;
}
main .list .unit{
    display: grid;
    border-radius: 0.06rem;
    background-color: #fff;
    overflow: hidden;
}
main .list .unit .detail{
    display: grid;
    padding: 0.1rem;
}
main .list .unit .detail .desc{
    font-size: 0.1rem;
    line-height: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
main .list .unit .detail .price{
    display: grid;
    color: #ff5500;
    grid-template-columns: repeat(2,1fr);
    line-height: 0.2rem;
}
main .list .unit .detail .price span:first-of-type{
    place-items: center end;
}
main .list .unit .detail .price span:last-of-type{
    place-items: center end;
    color: #999;
}

• 效果图如下