layui-row 布局因高度不一致错位问题

js框架为vue，通过vue去循环生成layui-col-md2;
<div class="layui-row layui-col-space1">
    <template v-for="(item, index) in coursewares" v-cloak>
        <div class="layui-col-md2">
           <img :src="item.fBook">
        </div>
    </template>
</div>

解决方案，在要换行的地方添加一个能换行的标签，hr，/n等
<div class="layui-row layui-col-space1">
    <template v-for="(item, index) in coursewares" v-cloak>
        <div class="layui-col-md2">
           <img :src="item.fBook">
        </div>
        <hr v-if="(index+1)%6 == 0" />
    </template>
</div>