react javascript css grid masonry responsive issue - css

Question

The responsive part of my code doesn't work well, as the browser width shrink, the height of image-list doesn't adjust properly. Why?
here is my imageList.js
import React from "react";
import "./imageList.css";
import ImageCard from "./imageCard";
const imageList = ({ images }) => {
const renderList = images.map((image) => {
return <ImageCard key={image.id} image={image} />;
});
return <div className="image-list">{renderList}</div>;
};
export default imageList;
here is my imageList.css
.image-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 0px 10px;
grid-auto-rows: minmax(1px, auto);
}
.image-list img {
width: 250px;
grid-row-end: span 2;
}
here is my imageCard.js
import React, { useRef, useState, useEffect } from "react";
const ImageCard = ({ image }) => {
const imageRef = useRef(null);
const [spans, setSpans] = useState(0);
useEffect(() => {
imageRef.current.addEventListener("load", handleSpansChange);
}, [spans]);
const handleSpansChange = () => {
const height = imageRef.current.clientHeight;
const spans = Math.ceil(height) + 10;
setSpans(spans);
console.log(spans);
};
return (
<div style={{ gridRowEnd: `span ${spans}` }}>
<img src={image.urls.regular} alt={image.description} ref={imageRef} />
</div>
);
};
export default ImageCard;
Notes that ImageList is a component render in app.js file