La imagen dentro de la cuadrícula extiende el tamaño del elemento de la cuadrícula de manera desproporcionada a otros

¿Alguien puede ayudar a hacer que el ancho de la cuadrícula sea 50/50 y explicar qué sucedió?

Para abordar la primera parte de su pregunta / solicitud; para dividir la cuadrícula en dos columnas de igual tamaño, simplemente podría especificar dimensiones discretas, por ejemplo, en lugar de:

grid-template-columns: auto auto;

En su lugar, podría utilizar:

grid-template-columns: 1fr 1fr;

#hi {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#hi>div {
  border: 1px solid red;
  min-height: 300px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}

<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

Demostración de JS Fiddle .

O haga uso de la repeat()función para hacer lo mismo:

grid-template-columns: repeat(2, 1fr);

#hi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#hi>div {
  border: 1px solid red;
  min-height: 300px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

img {
  width: 100%;
  height: auto;
}

<div id='hi'>
  <div><img src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg'></div>
  <div>erhbv</div>
  <div>erhbv</div>
  <div></div>
</div>

Demostración de JS Fiddle .

Si bien he usado la frunidad en los ejemplos anteriores, por supuesto, se podrían usar otras dimensiones (como 50% 50%/ repeat(2, 50%)y así sucesivamente); 1frsimplemente asigna una unidad fraccionaria, determinada por el número anterior, del espacio disponible.

Con respecto a la última parte de su pregunta, solo puedo ofrecer una observación sobre lo que sucedió, pero sin hacer referencia a las especificaciones, pero creo que el uso de la autopalabra clave permitió que el contenido del grid-item(el que <div>contiene el <img>) dicte el tamaño de ese elemento. Sin embargo, me temo que no sé por qué produjo el resultado final (sospecho que otros, sin embargo, ofrecerán una explicación mucho mejor).

Referencia:

• repeat()función .