css将多个图像对齐到精确位置？

Question

我正在尝试使用css网格模仿下面显示的布局：

但是，我能得到的最好的是：

我在对齐底部的两张图像时遇到了麻烦，尽管它适合我的需要。

代码：

<!--CSS Grid to display home page images -->

 <div class="container">

<div class="wrapper" id="body-content-collapse-sidebar">

  <div class="bed-grid">
    <img class="promo-image-bed" src="{{asset('/images/Home_Bed_compressed.jpg')}}" alt="">
    <a href="#">New Product <span class="">➡</span></a>
  </div>
  <div class="pillow-grid">
    <img class="promo-image-pillow" src="{{asset('/images/Home_Pillow_compressed.jpg')}}" alt="">
    <a href="#">Best Seller <span class="">➡</span></a></div>

  <div class="living-room-grid">
    <img class="promo-image-living-room" src="{{asset('/images/Shop_Page.jpg')}}" alt="">
    <a href="#">DC Home Design <span class="">➡</span></a>
  </div>
  <div class="sofa-grid">
    <img class="promo-image-sofa" src="{{asset('/images/Home_Sofa.jpg')}}" alt="">
    <a href="#">Top Rated <span class="">➡</span></a>
  </div>
</div>
</div>



@endsection

@push('style')
<style>
  .wrapper {
    display: grid;
    grid-template-columns: 3fr 2fr 3fr;
    grid-template-rows: repeat(8, 1fr);
    padding: 1em;
    grid-gap: 2.0em;
    background-color: black;

    height: 600px;
    max-width: 100%;
  }

  .wrapper>div {
    position: relative;
  }

  .wrapper>div>a {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    text-decoration: none;
  }

  .wrapper>div::after {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: black;
    color: white;
    padding: .5rem;
  }

  .bed-grid{
    grid-column: 3;
    grid-row: 1/5;
    /* height: 140%;
    width: 70%; */
  }


  .pillow-grid{
    grid-column: 3;
    grid-row: 4 / 6;
    /* height: 140%;
    width: 100%; */
  }







  .living-room-grid{
    grid-column: 1 / 3;
    grid-row: 1 / 9;

  }



  .sofa-grid{
    /* grid-column-start: 3/6; */
    grid-row: 6/9;
  }



  .promo-image-bed{
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }


  .promo-image-pillow{
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }



  .promo-image-living-room{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    /* margin-top: 50px; */
  }

  .promo-image-sofa{
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }





  .promo-page-background-color{
    background-color: black;
  }

我无法将尺寸减半，以使其与顶部图像完美匹配。很有可能使它看起来像我想要的吗？

Answer 1

您可以通过使用网格区域然后在每个网格区域上应用display: flex来控制布局。我玩过您的CSS，这将起作用。您仍然需要尝试调整图像的大小以及网格列的大小。

我也强烈建议阅读这篇有关网格的文章。 https://css-tricks.com/snippets/css/complete-guide-grid/

.wrapper {
    display: grid;
    grid-template-columns: 2fr .5fr .5fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
        "main new new"
        "main best top";
    padding: 1em;
    grid-gap: 2.0em;
    background-color: black;
    width: 100%;
}

.bed-grid{
    grid-area: new;
    display: flex;
}

.pillow-grid{
    grid-area: best;
    display: flex;
}

.living-room-grid{
    grid-area: main;
    display: flex;
}

.sofa-grid{
    grid-area: top;
    display: flex;
}

.promo-image-bed{
    border-radius: 5px;
    max-width: 100%;
}

.promo-image-pillow{
    border-radius: 5px;
    max-width: 100%;
}

.promo-image-living-room{
    border-radius: 5px;
    max-width: 100%;
}

.promo-image-sofa{
    border-radius: 5px;
    max-width: 100%;
}