div设置多行多列，元素间隔距离相同，边框距离相同

实现一个div里面有三行五列，第一列到容易左边框间距和第五列到容易有边框间距相同，同时里面同等大小的div水平位置相同，垂直间隔位置相同；当一页超过具体个数，进行换行显示

<template>
  <div class="container">
    <div class="item" v-for="item in items" :key="item">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 15 }, (_, i) => i + 1) // 生成1到15的数组
    };
  }
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 靠左对齐 */
  align-items: stretch; /* 垂直对齐 */
  gap: 10px; /* 设置水平间隔 */
  padding: 10px 0; /* 上下填充，左右不填充 */
  box-sizing: border-box; /* 确保padding计算在宽度内 */
}

.item {
  width: calc((100% / 5) - 10px); /* 5列，减去间隔 */
  height: 100px; /* 固定高度 */
  background-color: #ccc; /* 背景色 */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #999; /* 边框 */
  box-sizing: border-box; /* 确保边框计算在宽度内 */
}

/* 添加左右边距 */
.item:first-child {
  margin-left: 10px; /* 第一列左边距 */
}

.item:nth-child(5n) {
  margin-right: 10px; /* 第五列右边距 */
}
</style>

效果图