SO-66817240

https://stackoverflow.com/questions/66817240/how-to-make-css-grid-container-keep-responsive-square-size --- Uses an excellent 'square div' technique from https://spin.atomicobject.com/2015/07/14/css-responsive-square

HTML

<div class='container'>
  <div class='grid-wrapper'>
    <div class='grid'>
      <div class="grid-box">
        <img src="https://picsum.photos/200/300"></img>
      </div>
      <div class="grid-box">
        <img src="https://picsum.photos/200/300"></img>
      </div>
      <div class="grid-box">
        <img src="https://picsum.photos/200/300"></img>
      </div>
    </div>
  </div>
</div>

SCSS

$-gutter: 10px;

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  max-width: 600px;
  width: 100%;
  background: #ffff00;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
}

.grid-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: $-gutter;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: $-gutter;
  width: 100%;
  height: 100%;

  &-box {
    position: relative;
    width: 100%;
    height: 100%;

    &:first-child {
      grid-column: 1 / span 2;
    }
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    object-fit: cover;
  }
}