Search code examples
cssflexboxgrid

How can I Fit Image inside Grid Layout

I am creating this layout

enter image description here

My code :

<div class="tour-grid"> 
        
          <div class="tgItem tg-left"> 
            <a href="" class="tgCard">
              <div class="tgCard__image ro-4">
                <img class="ro-4 js-lazy loaded" src="img/tours/3.png" alt="image" data-ll-status="loaded">
              </div> 
            </a>

          </div>

          <div class="tgItem tgChild"> 
            <a href="" class="tgCard">
              <div class="tgCard__image ro-4">
                <img class="ro-4 js-lazy loaded" src="img/blog/2/2.png" alt="image" data-ll-status="loaded">
              </div>  
            </a> 
          </div>

          <div class="tgItem tgChild"> 
            <a href="" class="tgCard">
              <div class="tgCard__image ro-4">
                <img class="ro-4 js-lazy loaded" src="img/blog/2/3.png" alt="image" data-ll-status="loaded">
              </div> 
            </a> 
          </div>
          
          <div class="tgItem tgChild"> 
            <a href="" class="tgCard">
              <div class="tgCard__image ro-4">
                <img class="ro-4 js-lazy loaded" src="img/tours/2.png" alt="image" data-ll-status="loaded">
              </div> 
            </a> 
          </div> 
        </div>

Check my fiddle

But grid are not equal and image doesn't fit inside div.

Right div height should adjust to left col

enter image description here

what is rules with grid system ? should i wrap 3 div into one. ?

enter image description here

Solution

  • You can simplify your code like below

    .grid {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  max-width: 600px;
  margin: 20px auto;
}

.grid img:first-child {
  grid-area: span 3/span 2;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    <div class="grid">
  <img src="https://picsum.photos/id/1074/600/400">
  <img src="https://picsum.photos/id/1074/300/200">
  <img src="https://picsum.photos/id/1074/300/200">
  <img src="https://picsum.photos/id/1074/300/200">
</div>

    I have an article explaining this code and more: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/#image-grid