Cards skip line with MaterializeCSS and VUE - css

Question

I am showing information on MateralizeCSS cards but I want to show them side by side on medium to large devices but they are shown one over the other when using V_FOR and I do not understand the reason:
Can you help me?
According to I must show 3 cards and then 1 for the class: col s12 m4 but it shows one on top of the other in any resolution
<div class="row">
<div class="col s12 m4" v-for="item in services" :key="item.id">
<div v-for="inside in item.servicios" :key="inside.name">
<div class="card" v-if="item.id === serviceId">
<div class="card-content">
<img class="responsive-img" :src="require(`../assets/img/services/${inside.img}`)">
<h3>Lavandería</h3>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
</div>
Attached image of how they are displayed:
I also tried to do it with FLexbox but some images take a lot of space and look bad

Answer 1

You need to place all the cards inside a single row - it is not 1 row per card. Rows are block level items so they will start a new line. I replaced the image and duplicated your card markup (which starts .col) 3 times:
https://codepen.io/doughballs/pen/rNVyaBR?editors=1010
<div class="row">
<!-- Card 1 -->
<div class="col s12 m4" v-for="item in services" :key="item.id">
<div v-for="inside in item.servicios" :key="inside.name">
<div class="card" v-if="item.id === serviceId">
<div class="card-content">
<img class="responsive-img" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-650-80.jpg">
<h3>Lavandería</h3>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col s12 m4" v-for="item in services" :key="item.id">
<div v-for="inside in item.servicios" :key="inside.name">
<div class="card" v-if="item.id === serviceId">
<div class="card-content">
<img class="responsive-img" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-650-80.jpg">
<h3>Lavandería</h3>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="col s12 m4" v-for="item in services" :key="item.id">
<div v-for="inside in item.servicios" :key="inside.name">
<div class="card" v-if="item.id === serviceId">
<div class="card-content">
<img class="responsive-img" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-650-80.jpg">
<h3>Lavandería</h3>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
</div>
https://materializecss.com/cards.html