使用 aspect-ratio 属性或 padding-top 技巧可让网格子元素保持固定比例。1. 推荐使用 aspect-ratio：现代浏览器支持，直接设置宽高比，如 aspect-ratio: 1/1 实现正方形；2. 兼容旧浏览器可用 padding-top：通过 height: 0 和 padding-top 百分比（如 100% 对应 1:1）创建比例容器，内容用绝对定位填充。常用于图片卡片、视频等响应式场景，结合 grid 布局实现自适应且比例统一的视觉效果。
要让网格子元素保持固定比例，可以通过 CSS 网格布局结合 padding-top 技巧或 aspect-ratio 属性来实现。下面介绍两种常用方法。
使用 aspect-ratio 属性（推荐）
现代浏览器支持 aspect-ratio 属性，能直接设置元素的宽高比，用法简单直观。
注意：确保父容器使用 grid 布局，子元素通过该属性控制比例。示例：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background: #007acc;
height: 0;
padding-bottom: 100%; / 旧方法，见下文 /
/ 或者使用 aspect-ratio： /
aspect-ratio: 1 / 1; / 1:1 正方形 /
}
你也可以设置其他比例，比如：
立即学习“前端免费学习笔记（深入）”；
- aspect-ratio: 16 / 9 —— 常用于视频
- aspect-ratio: 4 / 3 —— 传统屏幕比例
- aspect-ratio: 3 / 4 —— 竖向卡片
使用 padding-top 百分比技巧（兼容老浏览器）
在不支持 aspect-ratio 的环境中，可以利用 padding-top 是相对于父元素宽度的特性来创建固定比例的容器。
步骤如下：
- 将元素高度设为 height: 0
- 通过 padding-top 设置比例（例如 100% 得到 1:1）
- 内容区域使用绝对定位填充
示例：
.grid-item {
position: relative;
height: 0;
padding-top: 100%; /* 1:1 比例 */
background: #28a745;
}
.grid-item-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
计算公式：
padding-top = (高度 / 宽度) * 100%
比如 16:9 就是 padding-top: 56.25%（9 ÷ 16 × 100）
结合网格与固定比例的实际场景
在响应式布局中，常用于图片卡片、视频容器、商品展示等需要统一视觉比例的场景。
完整示例：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
}
.gallery-item {
aspect-ratio: 1 / 1;
background: #ccc;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
这样无论屏幕多宽，每个子项都保持正方形，且自动换行适应容器。
基本上就这些。优先使用 aspect-ratio，简洁高效；若需兼容旧浏览器，用 padding-top 技巧也能稳定实现固定比例效果。
