Grid items have different height

I'm trying to create a simple grid layout but one thing doesn't work for me. All images have different width and height, their width doesn't go out of cells but height does, like this:

.grid__container {
  display: grid;
  width: 1200px;
  margin: 50px auto;
  grid-template-columns: repeat(12, [col] 1fr);
  grid-template-rows: [row] 150px [row] 165px [row] 150px [row] 185px [row] 135px;
  grid-gap: 1rem;
}

.grid__item__1 {
  grid-column: col 1 / span 6;
  grid-row: row 1;
}

.grid__item__2 {
  grid-column: col 7 / span 6;
  grid-row: row 1;
}

.grid__item__3 {
  grid-column: col 1 / span 6;
  grid-row: row 2 / span 2;
}

.grid__item__4 {
  grid-column: col 7 / span 2;
  grid-row: row 2;
}

.grid__item__5 {
  grid-column: col 9 / span 2;
  grid-row: row 2;
}

.grid__item__6 {
  grid-column: col 11 / span 2;
  grid-row: row 2;
}

.grid__item__7 {
  grid-column: col 7 / span 3;
  grid-row: row 3;
}

.grid__item__8 {
  grid-column: col 10 / span 3;
  grid-row: row 3;
}

.grid__item__9 {
  grid-column: col 1 / span 4;
  grid-row: row 4 / span 2;
}

.grid__item__10 {
  grid-column: col 5 / span 4;
  grid-row: row 4 / span 2;
}

.grid__item__11 {
  grid-column: col 9 / span 2;
  grid-row: row 4 / span 2;
}

.grid__item__12 {
  grid-column: col 11 / span 2;
  grid-row: row 4 / span 2;
}

.grid__item__13 {
  grid-column: col 1 / span 2;
  grid-row: row 5;
}

.grid__item__14 {
  grid-column: col 3 / span 6;
  grid-row: row 5;
}

.grid__item__15 {
  grid-column: col 9 / span 4;
  grid-row: row 5;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <link rel="stylesheet" href="styles/grid.css">
    <link rel="stylesheet" href="styles/normalize.css">
</head>
<body>

    <main>
      <div class="grid__container">
        <div class="grid__item__1">
          <img src="https://via.placeholder.com/600x150.png/b3dfbe">
        </div>
        <div class="grid__item__2">
          <img src="https://via.placeholder.com/600x150.png/75c5b8">
        </div>
        <div class="grid__item__3">
          <img src="https://via.placeholder.com/600x320.png/f16789">
        </div>
        <div class="grid__item__4">
          <img src="https://via.placeholder.com/200x165.png/8d96f3">
        </div>
        <div class="grid__item__5">
          <img src="https://via.placeholder.com/200x165.png/8d96f3">
        </div>
        <div class="grid__item__6">
          <img src="https://via.placeholder.com/200x165.png/8d96f3">
        </div>
        <div class="grid__item__7">
          <img src="https://via.placeholder.com/300x150.png/fac460">
        </div>
        <div class="grid__item__8">
          <img src="https://via.placeholder.com/300x150.png/fac460">
        </div>
        <div class="grid__item__9">
          <img src="https://via.placeholder.com/400x185.png/608cc9">
        </div>
        <div class="grid__item__10">
          <img src="https://via.placeholder.com/400x185.png/608cc9">
        </div>
        <div class="grid__item__11">
          <img src="https://via.placeholder.com/200x195.png/608cc9">
        </div>
        <div class="grid__item__12">
          <img src="https://via.placeholder.com/200x195.png/608cc9">
        </div>
        <div class="grid__item__13">
          <img src="https://via.placeholder.com/200x145.png/6653af">
        </div>
        <div class="grid__item__14">
          <img src="https://via.placeholder.com/600x135.png/6653af">
        </div>
        <div class="grid__item__15">
          <img src="https://via.placeholder.com/400x135.png/6653af">
        </div>
      </div>
    </main>

</body>
</html>

As I went through a bunch of examples, this approach was supposed to be working. Do I have to add overflow or object-fit to my images?

Solution

You've adjusted your grid rows based on the image heights which is redundant:

make your grid rows auto (just removing grid-template-rows definition will do that - also remove the grid line name [row] from grid-row definitions)

now use object-fit: cover for the image to fill the grid item using:

img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block; /* removes whitespace characteristic of inline elements */
}

also the note that your last grid row is 6 and not 5 as your fourth row items span two rows (or you can remove the span for the fourth row)

See demo below:

.grid__container {
  display: grid;
  width: 1200px;
  margin: 50px auto;
  grid-template-columns: repeat(12, [col] 1fr);
  /* grid-template-rows: [row] 150px [row] 165px [row] 150px [row] 185px [row] 135px;*/
  grid-gap: 1rem;
}

.grid__item__1 {
  grid-column: col 1 / span 6;
  grid-row: 1;
}

.grid__item__2 {
  grid-column: col 7 / span 6;
  grid-row: 1;
}

.grid__item__3 {
  grid-column: col 1 / span 6;
  grid-row: 2 / span 2;
}

.grid__item__4 {
  grid-column: col 7 / span 2;
  grid-row: 2;
}

.grid__item__5 {
  grid-column: col 9 / span 2;
  grid-row: 2;
}

.grid__item__6 {
  grid-column: col 11 / span 2;
  grid-row: 2;
}

.grid__item__7 {
  grid-column: col 7 / span 3;
  grid-row: 3;
}

.grid__item__8 {
  grid-column: col 10 / span 3;
  grid-row: 3;
}

.grid__item__9 {
  grid-column: col 1 / span 4;
  grid-row: 4 / span 2;
}

.grid__item__10 {
  grid-column: col 5 / span 4;
  grid-row: 4 / span 2;
}

.grid__item__11 {
  grid-column: col 9 / span 2;
  grid-row: 4 / span 2;
}

.grid__item__12 {
  grid-column: col 11 / span 2;
  grid-row: 4 / span 2;
}

.grid__item__13 {
  grid-column: col 1 / span 2;
  grid-row: 6; /* changed from row 5 to 6 */
}

.grid__item__14 {
  grid-column: col 3 / span 6;
  grid-row: 6; /* changed from row 5 to 6 */
}

.grid__item__15 {
  grid-column: col 9 / span 4;
  grid-row: 6; /* changed from row 5 to 6 */
}

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block; /* removes whitespace characteristic of inline elements */
}

<main>
  <div class="grid__container">
    <div class="grid__item__1">
      <img src="https://via.placeholder.com/600x150.png/b3dfbe">
    </div>
    <div class="grid__item__2">
      <img src="https://via.placeholder.com/600x150.png/75c5b8">
    </div>
    <div class="grid__item__3">
      <img src="https://via.placeholder.com/600x320.png/f16789">
    </div>
    <div class="grid__item__4">
      <img src="https://via.placeholder.com/200x165.png/8d96f3">
    </div>
    <div class="grid__item__5">
      <img src="https://via.placeholder.com/200x165.png/8d96f3">
    </div>
    <div class="grid__item__6">
      <img src="https://via.placeholder.com/200x165.png/8d96f3">
    </div>
    <div class="grid__item__7">
      <img src="https://via.placeholder.com/300x150.png/fac460">
    </div>
    <div class="grid__item__8">
      <img src="https://via.placeholder.com/300x150.png/fac460">
    </div>
    <div class="grid__item__9">
      <img src="https://via.placeholder.com/400x185.png/608cc9">
    </div>
    <div class="grid__item__10">
      <img src="https://via.placeholder.com/400x185.png/608cc9">
    </div>
    <div class="grid__item__11">
      <img src="https://via.placeholder.com/200x195.png/608cc9">
    </div>
    <div class="grid__item__12">
      <img src="https://via.placeholder.com/200x195.png/608cc9">
    </div>
    <div class="grid__item__13">
      <img src="https://via.placeholder.com/200x145.png/6653af">
    </div>
    <div class="grid__item__14">
      <img src="https://via.placeholder.com/600x135.png/6653af">
    </div>
    <div class="grid__item__15">
      <img src="https://via.placeholder.com/400x135.png/6653af">
    </div>
  </div>
</main>