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

html 复制代码
<view class="waibiankuang">
  <block wx:for="{
  
  {dots}}" wx:key="index">
    <view class="dot {
  
  {item.className}}"  data-index="{
  
  {index}}">
	</view>
  </block>
</view>
javascript 复制代码
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代码呢

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;
}
相关推荐
2501_9160074732 分钟前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
说私域2 小时前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量拉新策略研究
人工智能·小程序·开源
2501_915918413 小时前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
七七软件开发4 小时前
团购商城 app 系统架构分析
java·python·小程序·eclipse·系统架构·php
七七软件开发4 小时前
打车小程序 app 系统架构分析
java·python·小程序·系统架构·交友
换日线°14 小时前
css 不错的按钮动画
前端·css·微信小程序
说私域15 小时前
从渠道渗透到圈层渗透:开源链动2+1模式、AI智能名片与S2B2C商城小程序的协同创新路径研究
人工智能·小程序·开源
qq_4275060816 小时前
JavaScript和小程序写水印的方法示例
前端·算法·微信小程序
冥王 • 雷利18 小时前
Notepad++插件安装
notepad++
gongzemin1 天前
使用Node.js开发微信第三方平台后台
微信小程序·node.js·express