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

<view class="waibiankuang">
  <block wx:for="{
  
  {dots}}" wx:key="index">
    <view class="dot {
  
  {item.className}}"  data-index="{
  
  {index}}">
	</view>
  </block>
</view>

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;
}