向孙辈传播CSS网格大小，以获取vuetify v卡映像。
提问于 2020-05-11 15:37:10
我试图在css网格中排列带有图像的虚拟卡片，但是v卡的v-img没有看到它的大小，因为它是一个外孙。如何将网格大小向下传播到v？
我希望图片填写卡片，类似于flex-box版本(https://vuetifyjs.com/en/components/cards/#grids)。
这是我想要的样子，根据窗口大小自动调整图像大小。
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({})
});.grid {
display: grid;
height: calc(100vh - 64px - 60px);
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
}
.grandchild {}<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.2.26/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vuetify@2.2.26/dist/vuetify.min.css" />
<div id="app">
<v-app id="inspire">
<v-app-bar app fixed dark>
<v-toolbar-title>Toolbar</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container>
<div class="grid">
<v-card v-for="n in 4" :key="n">
<v-img height="100%" width="100%" class="grandchild" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg">
</v-img>
<v-card-subtitle>Number {{ n }}</v-card-subtitle>
</v-card>
</div>
</v-container>
</v-content>
<v-footer app dark>
<span>Footer</span>
</v-footer>
</v-app>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-11 16:03:02
问题是，您正在使用1 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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61741249
复制相关文章
点击加载更多
腾讯云开发者
