CSS Grid设置grid-template-rows后图片溢出且border-radius丢失如何解决？

问题根源 #

1. object-fit: cover 写在了图片容器 .product__image 上，这个属性仅对img、video这类替换元素生效，容器设置无效
2. 你没有给.product__image和内部的img设置宽高100%，大尺寸图片会保持原始大小撑出网格单元格，导致溢出
3. 圆角仅设置在img标签上，当你给容器加overflow: hidden时，img超出容器的部分（包含底部圆角区域）会被直接裁剪，就会出现底部圆角消失的问题

修复方案 #

调整.product__image相关的样式即可，修改后的代码如下：

&__image {
  /* 新增：让容器完全撑满所属的网格单元格 */
  width: 100%;
  height: 100%;
  /* 新增：圆角直接加在容器上，比加在img上更稳定 */
  border-radius: 10px;
  /* 保留overflow:hidden，裁剪超出容器的内容 */
  overflow: hidden;

  & img {
    /* 新增：让图片继承父容器的尺寸 */
    width: 100%;
    height: 100%;
    /* 把原来容器上的object-fit移到img上，按比例裁剪填充容器 */
    object-fit: cover;
    /* 可以删掉原来img上的overflow和border-radius属性，没用 */
  }

  &-1 {
    grid-area: main;
  }

  &-2 {
    grid-area: sub1;
  }

  &-3 {
    grid-area: sub2;
  }

  &-4 {
    grid-area: sub3;
  }

  &-5 {
    grid-area: sub4;
  }
}

修改后既可以保证图片不会溢出网格单元格，也能正常显示圆角效果。

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