主页 / 问题 / 1232965
Accepted
Мне без сахара
Asked:2022-01-18 19:55:03 +0800 CST2022-01-18 19:55:03 +0800 CST

如何在 GRID 上制作这样的块？

  • 772

试过了，结果就是这样。如黄色图片所示，

在此处输入图像描述 在此处输入图像描述

html

1 个回答

  1. Best Answer

    .grid-container {
  display: inline-grid;
  grid-template-columns: repeat(4, 250px);
  grid-template-rows: 250px 250px;
  grid-gap: 5px 5px;
  grid-template-areas:
    "watch watch tour tour"
    "watch watch tips movies";
  padding: 5px;
  background-color: #f0f1f5;
  box-shadow: 0 5px 15px -5px #000;
}

.grid-container div {
  background-size: 1080px 557px;
  background-image: url(https://isstatic.askoverflow.dev/XWYw8.jpg);
}
.watch  { grid-area: watch;  background-position: -25px -15px;   }
.tour   { grid-area: tour;   background-position: -538px -15px;  }
.tips   { grid-area: tips;   background-position: -538px -272px; }
.movies { grid-area: movies; background-position: -795px -272px; }
    <div class="grid-container">
  <div class="watch"></div>
  <div class="tour"></div>
  <div class="tips"></div>
  <div class="movies"></div>
</div>

    • 2

相关问题