When I placed my code in the style scoped section...
This is the desired output that I'm aiming for:
.user-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 1rem;
}
.user-card {
padding: 1em;
color: #f2f2f2;
background: #1abc9c;
border-radius: .25rem;
}<div class="user-grid" v-for="user in allUsers" :key="user.id">
<div class="user-card" v-if="user.client_id === $route.params.id">
{{user.name}}
{{user.email}}
{{user.phone}}
</div>
<div class="user-card" v-if="user.client_id === $route.params.id">
{{user.name}}
{{user.email}}
{{user.phone}}
</div>
<div class="user-card" v-if="user.client_id === $route.params.id">
{{user.name}}
{{user.email}}
{{user.phone}}
</div>
</div>Note: Disregard the CSS code as I'm only trying to illustrate the output from Vue/Nuxt.
However, in Vue/Nuxt, I am seeing something different:
https://i.stack.imgur.com/ZgirC.png
I attempted to modify auto-fit minmax to auto-fit, minmax(200px, 200px) and while the size was correct, the layout did not adhere to the rule.
How can I properly apply the grid display in a Vue/Nuxt application?