Professional commercial photographer available for portraits, commercial and storytelling. Available on location. To input the code for a masonry gallery, follow these steps:

<div class="masonry-gallery">
  <div class="masonry-item"><img src="image1.jpg" alt="Description 1"></div>
  <div class="masonry-item"><img src="image2.jpg" alt="Description 2"></div>
  <div class="masonry-item"><img src="image3.jpg" alt="Description 3"></div>
  <!-- Add more items as needed -->
</div>

<style>
  .masonry-gallery {
    column-count: 3;
    column-gap: 16px;
  }

  .masonry-item {
    break-inside: avoid;
    margin-bottom: 16px;
  }

  .masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
  }

  @media (max-width: 768px) {
    .masonry-gallery {
      column-count: 2;
    }
  }

  @media (max-width: 480px) {
    .masonry-gallery {
      column-count: 1;
    }
  }
</style>

1. Customize as needed by adjusting column-count or column-gap values in the CSS to match your design preferences.

This configuration will create a responsive masonry gallery where images flow in columns with natural varying heights, adapting smoothly across different screen sizes.