Is it possible to stretch the height of images so that each row fully complements the conainer?

Question

Im trying to implement responsive masonry grid with react and css(I can not use any library whatsoever). I came across a very clever solution which is the css column-count property. The question is ,however, if theres any possibility to stretch, adjust the content of the div container (in my code reffered to as masonryGrid) so that its completely filled up. I know about the strech in flex display however that is not an option here due to the css column-count property.

Single element of masonry grid:

    const MasonryCell = (props: any) => {

    return(
        <img src={props.src} alt="cat" style={{width:'100%'}}></img>
    )
}

export {MasonryCell}

Masonry grid:

import { useMasonryGrid } from "../../helpers/hooks/useMasonryGrid"

const MasonryGrid = (props: any)=> {
    const {masonryGridRef, numberOfColumns} = useMasonryGrid()

return (
<div ref={masonryGridRef} style={{columnCount: props.numberOfColumns, columnGap:0, maxWidth:1200, margin: '0 auto', fontSize: 0}}>
    {props.children}
</div>
)
}

export {MasonryGrid}

App.tsx:

import React from "react";
import { MasonryGrid } from "./components/MasonryGrid/MasonryGrid";
import { MasonryCell } from "./components/MasonryCell";
import "./App.css";

const DUMMY_DATA = [
  "https://cdn2.thecatapi.com/images/7on.gif",
  "https://cdn2.thecatapi.com/images/8k7.jpg",
  "https://cdn2.thecatapi.com/images/9h2.jpg",
  "https://cdn2.thecatapi.com/images/9qj.jpg",
  "https://cdn2.thecatapi.com/images/a73.gif",
  "https://cdn2.thecatapi.com/images/aht.jpg",
  "https://cdn2.thecatapi.com/images/cua.jpg",
  "https://cdn2.thecatapi.com/images/dut.jpg",
  "https://cdn2.thecatapi.com/images/e64.jpg",
  "https://cdn2.thecatapi.com/images/MTg5NzA3Mw.jpg",
  "https://cdn2.thecatapi.com/images/MTk2NzgzNw.jpg",
  "https://cdn2.thecatapi.com/images/MjAyNDc5Ng.jpg",
  "https://cdn2.thecatapi.com/images/y9sSXTyxC.jpg",
  "https://cdn2.thecatapi.com/images/2b2pFY0-t.jpg",
  "https://cdn2.thecatapi.com/images/fW9wukL9G.jpg",
  "https://cdn2.thecatapi.com/images/YLTXM6XYQ.jpg",
  "https://cdn2.thecatapi.com/images/r0rerbt2U.jpg",
  "https://cdn2.thecatapi.com/images/S7CZYvR0-.png",
  "https://cdn2.thecatapi.com/images/11gBRYnGK.png",
];

function App() {
  return (
    <MasonryGrid>
      {DUMMY_DATA.map((data, index) => <MasonryCell src={data} key={index}/>)}
    </MasonryGrid>
  );
}

export default App;