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

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

代码

<!-- 产品列表 -->
        <div class="plist">
            <div class="plist_t"><img src="images/xihuan.png" /></div>
            <div class="plist_c">
                <div>
                    <a href="#">
                        <img src="images/p_list.jpg" />
                        <p>吃牛排的刀叉三件套西餐套装餐具刀勺全套两家用盘西餐具盘子儿童</p>
                        <div><span>￥12.9</span><span>2000+人已购买</span></div>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="images/p_list2.jpg" />
                        <p>吃牛排的刀叉三件套西餐套装餐具刀勺全套两家用盘西餐具盘子儿童</p>
                        <div><span>￥12.9</span><span>2000+人已购买</span></div>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="images/p_list.jpg" />
                        <p>吃牛排的刀叉三件套西餐套装餐具刀勺全套两家用盘西餐具盘子儿童</p>
                        <div><span>￥12.9</span><span>2000+人已购买</span></div>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="images/p_list2.jpg" />
                        <p>吃牛排的刀叉三件套西餐套装餐具刀勺全套两家用盘西餐具盘子儿童</p>
                        <div><span>￥12.9</span><span>2000+人已购买</span></div>
                    </a>
                </div>
            </div>
        </div>
css样式
main {
  padding-bottom: 0.5rem;
}
.plist {
  padding: 0.2rem 0;
}
.plist_t {
  text-align: center;
  margin-bottom: 0.25rem;
}
.plist_t img {
  width: 50%;
  height: auto;
}
.plist_c {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.1rem;
  grid-auto-rows: auto;
}
.plist_c > div {
  border-radius: 0.05rem;
  background-color: #fff;
}
main .plist_c img {
  width: 100%;
  height: auto;
  border-top-left-radius: 0.05rem;
  border-top-right-radius: 0.05rem;
}
.plist_c > div > a > p {
  margin: 0.06rem 0.1rem;
  height: 0.32rem;
  line-height: 0.16rem;
  overflow: hidden;
}
.plist_c > div > a > div {
  padding: 0 0.1rem 0.1rem;
}
.plist_c > div > a > div span:first-child {
  color: red;
  margin-right: 0.1rem;
}
.plist_c > div > a > div span:nth-of-type(2) {
  color: #999;
}

效果图