css grid: how to autoscale in height in proportion to width?

Question

How do you autoscale height in proportion to width with css grids?

let's say I have elements on a grid with 100px width scaling with 1fr.
How can you make the height grow proportionally? So when width is 105px the height is 105px too.

Or would another solution be more fitting here?

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: 3;
}

li {
  list-style: none;
  height: 100px;
  border: 1px solid black;
}
img {
  width: 50px;
  height: 50px;
  background-color: red;
}

<ul>
  <li>
    <img />
    <p>title here</p>
  </li>
    <li>
    <img />
    <p>title here</p>
  </li>
    <li>
    <img />
    <p>title here</p>
  </li>
    <li>
    <img />
    <p>title here</p>
  </li>
    <li>
    <img />
    <p>title here</p>
  </li>
    <li>
    <img />
    <p>title here</p>
  </li>
    <li>
    <img />
    <p>title here</p>
  </li>
    <li>
    <img />
    <p>title here</p>
  </li>
    <li>
    <img />
    <p>title here</p>
  </li>
    <li>
    <img />
    <p>title here</p>
  </li>
</ul>