react app/client/src/Gallery.css

/* Gallery.css */

/* Styling for the gallery container */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); /* 5 images in a row */
  grid-gap: 10px; /* Adjust the gap between images as needed */
}

/* Styling for individual gallery images */
.gallery-image {
  width: 100%;
  max-height: 100%; /* Ensure images maintain aspect ratio */
  object-fit: cover; /* Resize images to cover the container */
  cursor: pointer;
  /* Add any other image styling you want here */
}

/* Styling for the modal */
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  overflow: auto;
}

/* Styling for the close button */
.close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Styling for the full-size image in the modal */
.modal img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  padding: 20px;
}