How To Create Image Gallery Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Image Gallery Example</title>
<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
    padding: 10px;
  }
  .gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
  }
  .gallery-item:hover img {
    transform: scale(1.1);
  }
</style>
</head>
<body>
  <h2>Responsive Image Gallery</h2>
  <p>This gallery uses CSS Grid to automatically arrange images into columns that adapt to the screen size.</p>