finished react 10 -- need review on the css

react/8/pics/src/components/ImageCard.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+class ImageCard extends React.Component {
+    constructor(props) {
+        super(props)
+
+        this.state = { spans: 0 }
+
+        this.imageRef = React.createRef()
+    }
+
+    componentDidMount() {
+        this.imageRef.current.addEventListener('load', this.setSpans)
+    }
+
+    setSpans = () => {
+        const height = this.imageRef.current.clientHeight
+
+        const spans = Math.ceil(height / 150 + 1)
+
+        this.setState({ spans })
+    }
+
+    render() {
+        const { description, urls } = this.props.image
+        return (
+            <div style={{ gridRowEnd: `span ${this.state.spans}` }}>
+                <img ref={this.imageRef} src={urls.regular} alt={description} />
+            </div>
+        )
+    }
+}
+
+export default ImageCard

react/8/pics/src/components/ImageList.js

@@ -1,11 +1,13 @@
 import React from 'react'
+import ImageCard from './ImageCard'
+import './imageList.css'
 
 const ImageList = (props) => {
     const images = props.images.map((image) => {
-        return <img key={image.id} src={image.urls.regular} alt={image.description} />
+        return <ImageCard key={image.id} image={image} />
     })
 
-    return <div>{images}</div>
+    return <div className="image-list">{images}</div>
 }
 
 export default ImageList 

react/8/pics/src/components/imageList.css

@@ -0,0 +1,10 @@
+.image-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    grid-gap: 0 10px;
+    grid-auto-rows: 100px;
+}
+
+.image-list img {
+    width: 250px;
+}