Worked on Gallery Page

src/Gallery/Gallery.css

@@ -0,0 +1,42 @@
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    grid-gap: 10px;
+  }
+  
+  @media screen and (max-width: 767px) {
+    .gallery {
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      grid-gap: 5px;
+    }
+  }
+  
+  .galleryItem {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.2s ease-in-out;
+  }
+  
+  .galleryItem:hover {
+    transform: scale(1.05);
+  }
+
+  .container {
+    position: relative;
+	width: 40%;
+  }
+
+  .modalImage {
+    width: 100%;
+  }
+
+  .modalButton {
+    position: absolute;
+	padding: 16px;
+	background-color: green;
+	border-radius: 16px;
+	bottom: 10px;
+	left: 200px;
+	width: 100px;
+  }

src/Gallery/Gallery.js

@@ -1,5 +1,60 @@
+import Modal from 'react-modal';
+import { useState } from "react";
+import './Gallery.css';
+
+const images = [
+  { src: 'https://i.pinimg.com/736x/70/28/0f/70280f1b75ea956f4fdef7e31336d9f0.jpg', alt: 'Image 1' },
+  { src: 'https://wallpapers.com/images/featured-full/cool-anime-6kbwj9794wpnsfr1.jpg', alt: 'Image 2' },
+  { src: 'https://wallpapers.com/images/featured/cool-anime-pfp-pictures-71urutpksg13vkbk.jpg', alt: 'Image 3' },
+  { src: 'https://i.pinimg.com/236x/ab/dc/52/abdc52db893674a7b5dcb767be8776e5.jpg', alt: 'Image 4' },
+  { src: 'https://qph.cf2.quoracdn.net/main-qimg-a3fdbac7bf9f8db58f147887ffa76d88-lq', alt: 'Image 5' }
+];
+
 export default function Gallery() {
+    const [open, setOpen] = useState(false)
+    const [display, setDisplay] = useState('')
+    
+    const handleClick = (arg) => {
+        console.log("Test")
+        setDisplay(arg)
+        setOpen(true)
+        console.log(open)
+    }
+
     return (
-        <p>Gallery</p>
+        <div>
+            <div className="gallery">
+                {images.map((image, index) => (
+                    <img
+                    key={index}
+                    className="galleryItem"
+                    src={image.src}
+                    alt={image.alt}
+                    onClick={() => handleClick(image.src)}
+                    />
+                ))}
+            </div>
+            <div>
+                    <Modal
+                        isOpen={open}
+                        onRequestClose={() => setOpen(false)}
+                        style={{
+                            overlay: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            },
+                            content: {
+                                position: 'initial'
+                            }
+                        }}
+                    >   
+                        <div className="container">
+                            <button className="modalButton" onClick={() => setOpen(false)}>x</button>
+                            <img className="modalImage" src={display} onClick={() => setOpen(false)} />
+                        </div>
+                    </Modal>
+            </div>
+        </div>
     );
-};
+}