如何使用CSS3 Aspect Ratio开发响应式网格画廊

你现有HTML结构不需要做任何修改，直接添加如下CSS即可实现效果：

/* 基础样式重置，消除浏览器默认边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  gap: 12px;
  padding: 12px;
  /* 自动适配列数，单格最小宽度280px，剩余空间自动均分 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.wrapper > div {
  /* 核心属性：设置网格项1:1正方形宽高比，可按需改为4/3、16/9等比例 */
  aspect-ratio: 1 / 1;
  /* 以下为基础演示样式，可替换为你自己的画廊视觉样式 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e7eb;
  border-radius: 6px;
  font-size: 1.5rem;
}

/* 小屏适配调整 */
@media (max-width: 480px) {
  .wrapper {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    padding: 8px;
  }
}

实现说明 #

• 用CSS Grid的auto-fill+minmax实现列数自动适配，不需要针对不同屏幕写固定列数规则，容器宽度足够放下多少个最小宽度的格子就自动排多少列
• 直接用CSS3原生aspect-ratio属性控制格子宽高比，不需要传统方案里padding-top撑高度的hack写法，代码更直观易维护
• 如果要实现附图里的大小错落磁贴效果，只需要给指定格子添加跨列、跨行规则即可，示例：

/* 第一个格子跨2列2行，作为大尺寸磁贴 */
.wrapper > div:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

小屏下记得把跨列跨行值改为1，避免内容溢出屏幕

内容的提问来源于stack exchange，提问作者kannan D.S