html 列表排版,css列表排版

想要达到每一行图片宽度一样，间距也是一样的，请问需要怎么写啊？

html结构

v-for="item in list.data"

:key="item.key"

@click="handleToDetail(item)"

class="list"

>

{{ item.name }}

{{ item.desc }}

css

.list {

display inline-block

width 33.3%

height 24vh

margin-top 8px

&__box {

height 100%

width 90%

margin 0 auto

&__img {

height 70%

background-color #fff

border 1px solid #ccc

img {

width 100%

height 100%

}

}

}

.info {

height 30%

&__title {

width 100%

overflow hidden

white-space nowrap

text-overflow ellipsis

text-indent 1em

line-height 2em

font-size 14px

color #000

margin-top: 4px

}

&__author {

text-align right

margin-right 8px

.van-icon {

vertical-align -1px

margin-right 8px

}

}

}

}

怎么写都不对劲，有好的方法吗？