CodePen Embed - item-stretching-grid-problem

<html>
  <body>
    <div class="container">
      <button>⏮ Previous</button>
      <button>
        Download ⤵ 
      </button>
      <div class="image-container">
        <img class="gallery-item" src="https://imgix.bustle.com/uploads/image/2020/11/30/8c1feb87-9b38-457f-985c-c93fe73ab374-grogu-baby-yoda-the-child-1606497947.png?w=2000&h=640&fit=crop&crop=faces&auto=format%2Ccompress" alt="">
      </div>
      <button>
        Next ⏭
      </button>
    </div>
  </body>
</html>

.container {
  margin: auto;
  
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.image-container {
  margin: auto;
  width: 80%;
}

img.gallery-item {
  width: 100%;
  flex: 1;
}

button {
  margin: 10px;
}

This Pen is owned by bharat619 on CodePen.

See more by @bharat619-the-bashful on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.