微信小程序中在一个大边框里给每个小边框均匀分配空间

initBoard() {
  const dots = [];
  for (let i = 0; i < 9; i++) {
    for (let j = 0; j < 9; j++) {
      dots.push({
        className: "blank",
      });
    }
  }
  this.setData({ dots });
},

假设我现在创建一个81格的正方形,我要怎么写css代码呢

.waibiankuang {
	width: 690rpx;
	height: 690rpx;
	border: 5rpx solid black;
	margin: 20rpx auto;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-template-rows: repeat(9, 1fr);
	border-collapse: collapse;
}
.blank{
	border: 1rpx solid black; /* 让格子之间的边框合并 */
	display: flex;
	justify-content: center;
	align-items: center;
}