I'm facing an issue with arranging vuetify cards with images in a CSS grid. The problem is that the grid size is not being recognized by the v-card's v-img because it's a grandchild element. How can I pass down the grid size to the v-img?
My goal is to have the images fill out the card, similar to how it looks in the flex-box version (see here)
I am aiming for a responsive design where the image automatically resizes based on the window size.
https://i.sstatic.net/frulg.png
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5b3b0a085f7ebf3ebf4f4">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1a190918050a152c5e425e425e5a">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdad9c9d8c5cad5ec9e829e829e9a">[email protected]</a>/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>