响应式图片网格布局调整技术咨询（媒体查询适配及图片排序修改）

嗨，我来帮你搞定这个响应式图片网格的需求！我们只需要添加一段媒体查询CSS，结合CSS的order属性和display: contents特性就能实现，不用大幅改动现有HTML结构。

完整实现代码 #

HTML 部分

<section class="gallery">
  <div class="gallery__inner">
    <div class="gallery__top">
      <img src="https://i.ibb.co/WN5vVWt7/image-1.jpg" alt="image" />
      <img src="https://i.ibb.co/rXqckSF/image-2.jpg" alt="image" />
      <img src="https://i.ibb.co/n8fC0pqm/image-3.jpg" alt="image" />
    </div>
    <div class="gallery__bottom">
      <img src="https://i.ibb.co/CK7sFf0Q/image-4.jpg" alt="image" />
      <img src="https://i.ibb.co/qLdXRQKt/image-5.jpg" alt="image" />
      <img src="https://i.ibb.co/HfQnbNGd/image-6.jpg" alt="image" />
    </div>
  </div>
</section>

CSS 部分

.gallery__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--max-width)) minmax(0, 1fr);
  row-gap: 2rem;
}

.gallery__top {
  grid-column: 1/3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.gallery__bottom {
  grid-column: 2/4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.gallery__inner img {
  border-radius: 10px;
  border: 1px solid #a09f9d;
}

.gallery img {
  display: flex;
  width: 100%;
}

/* 新增的媒体查询，处理小屏适配 */
@media (max-width: 899px) {
  .gallery__inner {
    /* 小屏时改为2列网格 */
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .gallery__top,
  .gallery__bottom {
    /* 让容器"消失"，内部图片直接成为.gallery__inner的子元素 */
    display: contents;
  }

  /* 把image-3调整到最前面 */
  .gallery__top img:nth-child(3) {
    order: -1;
  }
}

关键逻辑说明 #

• 小屏布局重置：当屏幕宽度小于900px时，将.gallery__inner改为2列网格，同时给.gallery__top和.gallery__bottom设置display: contents，让内部图片直接成为外层网格的子元素，自动排列为3行2列。
• 图片排序调整：通过order: -1将.gallery__top中的第三张图片（image-3）的排序优先级设为最高，使其显示在最前方。
• 样式兼容：保留原有图片的圆角、边框等样式，确保不同屏幕尺寸下视觉风格一致。

这样调整后，大屏下会保持你原本设计的左右错位3列布局，小屏则自动切换成2列3行，且image-3固定在第一个位置，完美满足你的需求~

内容来源于stack exchange