五个元素一行均分三个换行且有间距，如何均分布局

1.用伪元素占位 

<div class="w4-list"><div class="w4-item" v-for="(item, index) in pxProjectList":key="index"><div class="info"><div class="name">{{ item.name|| '-' }}</div></div></div>  
</div> 
.w4-list{gap: 20px;display: flex;flex-wrap: wrap;justify-content: space-between;&::after {content: '';height: 0;width: calc(33% - 20px);}
}

2.使用grid

    display: grid;grid-template-columns: repeat(3, 1fr);gap:20px