Как выровнять div как неполную таблицу?

Question

Я создаю сайт электронной коммерции, используя vue. js, и мои списки продуктов выстраиваются странным образом, как показано на изображении ниже.

I am trying to achieve this effect shown below.

Here is a snippet of the code

Answer 1

Я решил. Когда я убрал ширину из тега ProductSlide, все, казалось, встало на свои места. Если кто-то знает, почему и как это произошло, дайте мне знать!

Вот как сейчас выглядит мой код:

<template>
<div class="products">
<div class="prod-container">
  <div class="bangles" v-for="product in products" v-bind:key="product.id">
    <ProductSlide class="slide" type="bangle" v-bind:product="product"/>
  </div>
</div>

</div>
</template>

<script type="text/javascript">
import ProductSlide from '@/components/productSlide.vue'
export default {
  name: 'Bangles',
  components: {
    ProductSlide
  }
}
<script>

<style type="text/css" scoped>
.slide {
    position: relative;
}

.prod-container {
    margin-left: 15%;
    display: inline-flex;
    flex-wrap: wrap;
}
.bangles {
    display: inline-flex;
    margin-top: 2%;
    float: left;
    vertical-align: top;
    }
@media screen and (max-width:639px) {
    .bangles {
        margin-left: 25%;
    }
}

.products {
   margin-bottom: 5em;
}

</style>

Answer 2

Это немного сложно без прототипа, но если я правильно понимаю ваш сценарий, я бы использовал CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

Ваши стили будут выглядеть примерно так

...
.bangles {
  display: grid;
  grid-gap: 1%;
  # set your grid to 3 columns of equal width
  grid-template-columns: repeat(3, 1fr); 
}

Вы можете уменьшить количество столбцов в ваших @media-запросах по желанию.