HTML

  1.   <main style="height: 1600px">
  2.            <div class="list">
  3.                    <div class="shopping">
  4.                      <div class="shopping-a">
  5.                        <a href="#">
  6.                          <img src="../img/item16.webp.jpg" />
  7.                          <p>日本进口缝隙收纳厨房置物架冰箱夹缝可移动</p>
  8.                          <div class="bq">
  9.                            <span>￥12.9</span><span>2000+人已购买</span>
  10.                          </div>
  11.                        </a>
  12.                      </div>
  13.                      <div class="shopping-b">
  14.                        <a href="#">
  15.                          <img src="../img/item17.webp.jpg" />
  16.                          <p>韩国拉面锅网红金色煮面泡面锅泡面小食堂</p>
  17.                          <div class="bq">
  18.                            <span>￥12.9</span><span>2000+人已购买</span>
  19.                          </div>
  20.                        </a>
  21.                      </div>
  22.                      <div class="shopping-c">
  23.                        <a href="#">
  24.                          <img src="../img/item18.webp.jpg" />
  25.                          <p>韩国拉面锅网红金色煮面泡面锅泡面小食堂</p>
  26.                          <div class="bq">
  27.                            <span>￥12.9</span><span>2000+人已购买</span>
  28.                          </div>
  29.                        </a>
  30.                      </div>
  31.                      <div class="shopping-d">
  32.                        <a href="#">
  33.                          <img src="../img/item19.webp.jpg" />
  34.                          <p>日本进口缝隙收纳厨房置物架冰箱夹缝可移动</p>
  35.                          <div class="bq">
  36.                            <span>￥12.9</span><span>2000+人已购买</span>
  37.                          </div>
  38.                        </a>
  39.                      </div>
  40.                    </div>
  41.                  </div> 
  42.         </main>

css部分

  1. .list {
  2.   padding: 3rem 0;
  3. }
  4. .shopping {
  5.   text-align: center;
  6.   margin-bottom: 0.25rem;
  7.   border-radius: 0.05rem;
  8.   background-color: #fff;
  9. }
  10. .shopping img {
  11.   width: 100%;
  12.   height: auto;
  13. }
  14. .shopping {
  15.   display: grid;
  16.   grid-template-columns: repeat(2, 1fr);
  17.   gap: 0.1rem;
  18.   grid-auto-rows: auto;
  19. }
  20. main .shoppingc img {
  21.   width: 100%;
  22.   height: auto;
  23.   border-top-left-radius: 0.05rem;
  24.   border-top-right-radius: 0.05rem;
  25.  }
  26. .shopping a p {
  27.   margin: 0.06rem 0.1rem;
  28.   height: 0.32rem;
  29.   line-height: 0.16rem;
  30.   overflow: hidden;
  31. }
  32. .shopping .bq span:first-child {
  33.   color: red;
  34.   margin-right: 0.1rem;
  35. }
  36. .shopping .bq span:nth-of-type(2) {
  37.   color: #999;
  38. }

最终显示效果