CSS Grid auto-fill while also keeping it's height same as the calculated width

Question

I am trying to build a responsive grid layout with css.

I have a varying number of children displayed on various screen sizes fully dynamically in width and height calculated by css. I would want each child to have a minimum width of 200px while maintaining it's aspect ratio. The grid should fit as many children as possible and the child should scale for the space which is not used.

I would like to use CSS grid layout.

Answer 1

It's possible to use grid layout:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

As of 2023, the aspect-ratio is well supported.

.child {
  aspect-ratio: 1 / 1;
}

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
aspect-ratio: 1/1;
border: 1px solid #DDD;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

More Information about aspect-ratio