css grid- align multiple images in exact location?

Question

I am trying to mimic this layout shown below using css grid:

However, the best I could get is this:

I had trouble aligning the bottom two images so that it fits like how I want though.

Code:

<!--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;
  }

I couldn't make the size half so that it fits perfectly with the top image. By any chance, is it possible to make it look how I wanted?

Answer 1

You can control the layout by using grid areas and then applying display: flex on each grid area. I have played around with your CSS and this will work. You will still have to play around with sizing the images and maybe the size of the grid columns.

I also highly recommend reading this article about grid. 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%;
}