Why isn't my image aligning to the bottom of my grid column?

Question

I'm trying to setup a grid system with one side a form and the other one an image. Now the problem is that I want everything to go to the bottom of the viewport, but for some reason the image doesn't go to the bottom of the screen.

I've already tried putting a height: 100vh on body, * and the image itself but it didn't change.

.login-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas: "form form form form form form form form map map map map";
  align-items: center;
  justify-items: center;
}

.login-section .login-form {
  grid-area: form;
}

.login-section .login-map {
  grid-area: map;
  width: 100%;
  overflow-x: hidden;
}

<div class="login-section">
  <div class="login-map">
    <img src="../img/map.png" alt="photo map">
  </div>
  <div class="login-form">
    <div class="login-form-back">
      Bla bla login
    </div>
  </div>
</div>

Answer 1

Give height: 100vh for login-section and use align-items: flex-end - see demo below:

body {
  margin: 0; /* Reset body-margin */
}
img {
  display: block; /* Remove whitespace below image*/
  height: 100%; /* Image extending the full height of the grid item */
}

.login-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "form form form form form form form form map map map map";
    /*align-items: center;*/
    align-items: flex-end; /* ADDED */
    height: 100vh; /* ADDED */
    justify-items: center;
}

.login-section .login-form {
    grid-area: form;
}

.login-section .login-map {
    grid-area: map;
    width: 100%;
    overflow-x: hidden;
    height: 100vh; /* image over full viewport*/
}

<div class="login-section">
        <div class="login-map">
            <img src="https://via.placeholder.com/100" alt="photo map">
        </div>
        <div class="login-form">
            <div class="login-form-back">
                Bla bla login
            </div>
        </div>
    </div>