HTML&CSS图片布局问题：无法实现响应式2行3列堆叠效果

Got it, let's get this gallery working exactly how you want it. First, a couple quick fixes needed for your existing HTML:

• You can't reuse the same id (like galleryimages) multiple times on a page—IDs must be unique. Switch that to a class instead.
• Your images and captions aren't grouped together, which makes it impossible to keep them paired when the layout changes. We'll fix that by wrapping each image+caption pair in a container.

Here's the revised HTML structure, followed by CSS that handles the 2-row 3-column layout and responsive stacking:

Revised HTML #

<div class="allimagesgallery">
  <div class="gallery-item">
    <a href="images/image1.jpg">
      <img class="gallery-image" src="images/image1.jpg" alt="Image 1">
    </a>
    <div class="caption">CAPTION 1.</div>
  </div>
  <div class="gallery-item">
    <a href="images/image2.jpeg">
      <img class="gallery-image" src="images/image2.jpeg" alt="Image 2">
    </a>
    <div class="caption">CAPTION 2</div>
  </div>
  <div class="gallery-item">
    <a href="images/image3.jpg">
      <img class="gallery-image" src="images/image3.jpg" alt="Image 3">
    </a>
    <div class="caption">CAPTION 3</div>
  </div>
  <div class="gallery-item">
    <a href="images/image4.jpg">
      <img class="gallery-image" src="images/image4.jpg" alt="Image 4">
    </a>
    <div class="caption">CAPTION 4</div>
  </div>
  <div class="gallery-item">
    <a href="images/image5.jpeg">
      <img class="gallery-image" src="images/image5.jpeg" alt="Image 5">
    </a>
    <div class="caption">CAPTION 5</div>
  </div>
  <div class="gallery-item">
    <a href="images/image6.jpeg">
      <img class="gallery-image" src="images/image6.jpeg" alt="Image 6">
    </a>
    <div class="caption">CAPTION 6</div>
  </div>
</div>

CSS for Layout & Responsiveness #

/* Base gallery container using CSS Grid */
.allimagesgallery {
  display: grid;
  /* Create 3 equal-width columns */
  grid-template-columns: repeat(3, 1fr);
  /* Add spacing between items (adjust as needed) */
  gap: 1.5rem;
  /* Add padding around the whole gallery */
  padding: 2rem;
}

/* Style each gallery item (image + caption) */
.gallery-item {
  /* Make sure items don't stretch unevenly */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Style images to fit their container */
.gallery-image {
  /* Ensure images don't overflow their container */
  max-width: 100%;
  height: auto;
  /* Optional: add a subtle border or shadow */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Style captions */
.caption {
  /* Add space between image and caption */
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #333;
}

/* Responsive breakpoints */
/* When screen is smaller than 768px, switch to 2 columns */
@media (max-width: 768px) {
  .allimagesgallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* When screen is smaller than 480px, switch to 1 column (stacked) */
@media (max-width: 480px) {
  .allimagesgallery {
    grid-template-columns: 1fr;
  }
}

Why this works: #

• CSS Grid is perfect for this kind of grid layout—it automatically handles the 2x3 structure without needing manual width calculations.
• Grouping each image and caption in .gallery-item ensures they stay paired no matter how the layout adjusts.
• The max-width: 100% on images makes them responsive, so they shrink with their container.
• Media queries let us adjust the number of columns based on screen size, so everything stacks neatly on mobile.

Feel free to tweak the gap, padding, and breakpoint values to match your design preferences.

内容的提问来源于stack exchange，提问作者user12919394