css сетка - выровнять несколько изображений в точном месте?

Question

Я пытаюсь имитировать c этот макет, показанный ниже, используя 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%;
}