Question

我想实现这个model，但我是网格新手。我知道 flexbox 但网格不起作用。我试图给网格边框（以某种方式在屏幕上显示它以了解网格是如何工作的，但没什么）如果有人有不同的解决方案，请帮助我.. 也许我的问题是元素的宽度和高度。这是我的代码：

html:
<section class="sc2cover">
      
      <div class="service-wrapper" id="portret-ps">
          <div class="services"style="background-color: var(--oxfordBlue);">Photoshoot portret</div>
          <img src="images/Dunare/image00003.jpeg" loading="lazy">
      </div>

      <div class="service-wrapper" id="car-ps">
        <div class="services" style="background-color: var(--oxfordRed);">Car Photoshoot</div>
        <img src="images/car/red_bmw.jpg" loading="lazy">
      </div>

      <div class="service-wrapper" id="wedding-ps">
          <div class="services" style="background-color: var(--oxfordGreen);">Wedding Photoshoot</div>
          <img src="images/wedding/wedding_photoshoot.jpg" loading="lazy">
      </div>

      <div class="auto-height-div">ok</div>

</section>

css:
.sc2cover{
    width: 100%;
    height: auto;
    padding: 0.6rem;
    position: relative;
    grid-template-columns:auto auto;
    grid-template-areas:
    "service1 gallery"
    "service2 gallery"
    "service3 gallery";
    column-gap:1rem;
}
#portret-ps{
    grid-area: service1;
}
#car-ps{
    grid-area: service2;
}
#wedding-ps{
    grid-area: service3;
}
.sc2cover .service-wrapper{
    position: relative;
}

.sc2cover .services{
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--platinum);
    box-shadow:inset 0 4px 8px 0 rgba(0, 0, 0, 0.6),inset 0 6px 20px 0 rgba(0, 0, 0, 0.6);
    font-family: var(--fontBig);
    font-size: 2.3vw;
}
.sc2cover img{
    width: 100%;
    height: auto;
}

Answer 1

我们错过了显示：.sc2cover 类中的网格。

元素网格定位

1 个答案: