将CSS网格大小传播到vuetify v卡图像的子代

我试图在css网格中安排带有图像的vuetify卡，但是v-card的v-img看不到网格大小，因为它是一个孙子。如何将网格大小传播到v-img

我想让这些图像填充卡片，就像flex box版本的外观一样（）

这就是我想要的外观，根据窗口大小自动调整图像大小

newvue({
el:“应用程序”，
vuetify:新的vuetify（），
数据：（）=>（{}）
});
.grid{
显示：网格；
高度：计算（100vh-64px-60px）；
网格模板柱：1fr 1fr；
网格模板行：1fr 1fr；
间隙：10px；
}
.孙子{}

工具栏
数字{{n}
页脚
问题是您在布局中使用了1fr。尝试使用
minmax（0，1fr）
代替：

.grid {
  display: grid;
  height: calc(100vh - 64px - 60px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

“填写卡片”是什么意思？img在代码上有一个固定的宽度。对不起，我只是想让网格形状保持可见。我把它改成了100%，只需在
v-img
中添加
height:calc（100%-54px）
就可以看到
v-card-subtitle
！我发现这条推文帮助我理解fr的用法：