如何实现每行图片数量自适应屏幕的图片网格视图？

Table布局天生是固定行列结构，没法动态调整每行的图片数量，推荐用CSS Grid或Flexbox实现自适应网格，以下是具体方案：

方案一：CSS Grid 布局（推荐） #

Grid是专门为网格场景设计的布局方案，能轻松通过媒体查询和自动填充实现需求：

HTML 结构 #

<div class="image-grid">
  <div class="image-item">
    <img src="your-image-url.jpg" alt="图片描述">
  </div>
  <div class="image-item">
    <img src="your-image-url.jpg" alt="图片描述">
  </div>
  <!-- 更多图片项 -->
</div>

CSS 样式 #

/* 基础样式：图片自适应容器 */
.image-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px; /* 可选：美化圆角 */
}

/* 网格容器基础配置 */
.image-grid {
  display: grid;
  gap: 12px; /* 图片间距，可自定义 */
  padding: 12px;
}

/* 移动端竖屏：每行2张 */
.image-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* 移动端横屏：自动填充3-5张（根据屏幕宽度） */
@media (min-width: 576px) and (orientation: landscape) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* 电脑端：随宽度增加列数（缩小最小列宽，容纳更多图片） */
@media (min-width: 1200px) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

关键说明

• repeat(auto-fill, minmax(200px, 1fr))：自动填充尽可能多的列，每列最小宽度200px，最大占满剩余空间。屏幕宽度足够时会自动增加列数（比如600px宽时显示3列，1000px宽时显示5列）。
• 可根据需求调整minmax的数值和媒体查询的断点（比如576px、1200px）。

方案二：Flexbox 布局 #

Flexbox通过弹性换行也能实现自适应网格，适合习惯Flex布局的场景：

CSS 样式 #

/* 基础样式：图片自适应 */
.image-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Flex容器配置 */
.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
}

/* 移动端竖屏：每行2张 */
.image-item {
  flex: 1 1 calc(50% - 6px); /* 50%宽度减去一半间距，避免换行 */
  min-width: 150px; /* 可选：防止屏幕过小时图片过窄 */
}

/* 移动端横屏：自动填充3-5张 */
@media (min-width: 576px) and (orientation: landscape) {
  .image-item {
    flex: 1 1 200px; /* 最小宽度200px，自动扩展 */
  }
}

/* 电脑端：增加列数 */
@media (min-width: 1200px) {
  .image-item {
    flex: 1 1 180px;
  }
}

关键说明

• flex: 1 1 200px：flex-grow:1允许项扩展，flex-shrink:1允许收缩，flex-basis:200px设置基础宽度，实现自动换行和自适应列数。

注意事项 #

• 两种方案都要确保图片设置width:100%; height:auto;，避免图片溢出或变形。
• 可根据设计需求调整gap（间距）、断点宽度和最小列宽。

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