淘宝移动端的商品列表

实现

HTML

<div class="list">
        <div><img src="images/nav/taobao.png" alt="" style="width: 50%; margin-top: 30px; margin-left: 80px" /></div>
        <div class="footer">
          <a href="">
            <img src="images/items/item1.png" alt="" />
            <p>产品介绍产品介绍产品介绍产品介绍产品介绍</p>
            <div class="jieshao">
              <span>￥ 12.9</span>
              <h3>2000+人已购买</h3>
            </div>
          </a>
          <a href="">
            <img src="images/items/item1.png" alt="" />
            <p>产品介绍产品介绍产品介绍产品介绍产品介绍</p>
            <div class="jieshao">
              <span>￥ 12.9</span>
              <h3>2000+人已购买</h3>
            </div>
          </a>
          <a href="">
            <img src="images/items/item1.png" alt="" />
            <p>产品介绍产品介绍产品介绍产品介绍产品介绍</p>
            <div class="jieshao">
              <span>￥ 12.9</span>
              <h3>2000+人已购买</h3>
            </div>
          </a>
          <a href="">
            <img src="images/items/item1.png" alt="" />
            <p>产品介绍产品介绍产品介绍产品介绍产品介绍</p>
            <div class="jieshao">
              <span>￥ 12.9</span>
              <h3>2000+人已购买</h3>
            </div>
          </a>
        </div>
      </div>

css

main .list .footer {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0.2rem;
}
main .list .footer a {
  background-color: #fff;
  display: grid;
  grid-template-rows: 1.3rem 0.6rem 0.3rem;
  border-radius: 0.1rem;
}
main .list .footer a img {
  width: 100%;
  height: 100%;
}
main .list .footer a p {
  padding: 0.1rem 0.1rem;
}
main .list .footer a .jieshao span {
  margin-left: 10px;
  color: coral;
}
main .list .footer a .jieshao h3 {
  margin-top: -15px;
  margin-left: 60px;
  font-size: 7px;
  color: #999;
}