Grid容器aspect-ratio在Firefox中被其他列忽略的兼容问题

使用CSS Grid布局时，设置grid-template-columns: auto 1fr，第一列子元素通过aspect-ratio: 1/1保持正方形比例，该布局在Chrome中正常显示，但Firefox中第一列宽度未被第二列识别，导致布局错乱：

• Chrome正常效果：第一列呈现正方形，宽度与第二列内容高度一致，第二列自适应填充剩余空间。
• Firefox异常效果：第一列宽度被挤压至极小，第二列占据大部分空间，布局错乱。

问题代码 #

CSS #

.gallery-card-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.14rem;
  .gallery-card-feature__image-container {
    background-color: #f8f8f8;
    position: relative;
    height: 100%;
    aspect-ratio: 1 / 1;
  }
  .gallery-card-feature__image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 75%;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }
  .gallery-card-feature__text {
    padding: 0.43rem 0;
    font-size: 1rem;
    line-height: 1.6rem;
    letter-spacing: -0.01em;
  }
  .gallery-card-feature__title {
    font-weight: 500;
  }
  .gallery-card-feature__subtitle {
    font-weight: 400;
    margin-top: 8px;
    opacity: 0.4;
  }
}

HTML #

<li class="gallery-card-feature">
  <div class="gallery-card-feature__image-container">
    <img decoding="async" src="https://placehold.co/600x400" class="gallery-card-feature__image">
  </div>
  <hgroup class="gallery-card-feature__text">
    <h4 class="gallery-card-feature__title">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, nemo facere. Modi alias a qui at doloribus iste nisi delectus, dolores magnam, deleniti architecto vero nemo tenetur omnis, ab eum.</h4>
    <p class="gallery-card-feature__subtitle">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, quasi rem exercitationem nisi ratione autem error, mollitia ipsam commodi qui cupiditate labore. Amet quam similique perspiciatis provident eaque ea voluptatum.</p>
  </hgroup>
</li>

问题原因 #

Firefox与Chrome在Grid布局auto列的计算逻辑上存在差异：Chrome会根据子元素的aspect-ratio和height:100%（继承行高）推导列宽，而Firefox无法建立这种宽高关联，导致第一列宽度未被正确计算，第二列挤压第一列空间。

解决方案 #

以下两种方案均可实现跨浏览器一致的布局效果：

方案1：使用min-content定义第一列 #

将Grid列定义改为grid-template-columns: min-content 1fr，同时给图片容器添加width: 100%并移除height:100%：

.gallery-card-feature {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 1.14rem;
}
.gallery-card-feature__image-container {
  background-color: #f8f8f8;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}

方案2：使用fit-content约束列宽 #

将第一列设置为fit-content(100%)，确保列宽由aspect-ratio和行高共同决定：

.gallery-card-feature {
  display: grid;
  grid-template-columns: fit-content(100%) 1fr;
  gap: 1.14rem;
}
.gallery-card-feature__image-container {
  background-color: #f8f8f8;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}

效果说明 #

两种方案都能让Firefox和Chrome保持一致的布局：第一列根据第二列的内容高度自动调整宽度，保持1:1的正方形比例，第二列自适应填充剩余空间。

内容的提问来源于stack exchange，提问作者Yura Beseda