CSS网格子项固定比例设置技巧

有志者，事竟成！如果你在学习文章，那么本文《CSS网格子元素固定比例设置方法》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

使用 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 {
  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 技巧也能稳定实现固定比例效果。

以上就是《CSS网格子项固定比例设置技巧》的详细内容，更多关于的资料请关注golang学习网公众号！