я есть CSS-макет сетки с кучей областей и фотоконтейнером.

Я не знаю как:

контролировать размер фотографии, чтобы она находилась в пределах сетки

сохраняйте ширину фотографии на уровне 100% (таким образом, равную его контейнеру) и масштабируйте высоту контейнера, чтобы соответствовать фотографии. В основном, когда окно становится меньше, ширина фотографии становится меньше, как и высота - растягивая тег, альбом и поворачивая элементы вверх.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 40vh 30vh 30vh;
  grid-gap: 10px;
  grid-template-areas: 
    "info    photo photo photo   photo" 
    "comment photo photo photo   photo" 
    "comment tag     tag   album rotate"
}

.photo {
  grid-area: photo;
  background: yellow;
}

.photo>img {
  object-fit: cover;
  width: 100%
}

.info {
  grid-area: info;
  background: pink;
}

.tag {
  grid-area: tag;
  background: teal;
}

.comment {
  grid-area: comment;
  background: green;
}

.album {
  grid-area: album;
  background: red;
}

.rotate {
  grid-area: rotate;
  background: blue;
}

<div class="container">
  <div class="photo">
    <img src="http://wallpaper-gallery.net/images/image/image-13.jpg" />
  </div>
  <div class="info">info</div>
  <div class="tag">tag</div>
  <div class="comment">comment</div>
  <div class="album">album</div>
  <div class="rotate">rotate</div>
</div>