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

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;
}
相关推荐
Jun28111 小时前
微信小程序初探之数据绑定
微信小程序
顾辰逸you11 小时前
uniapp--咸虾米壁纸(三)
前端·微信小程序
大包子13 小时前
小程序分享(下载)海报随记
微信小程序
996幸存者14 小时前
下拉、上拉选择器 支持搜索、删除、自定义选择内容、任意对象字段映射
微信小程序·uni-app
diygwcom17 小时前
AI实现超级客户端打印 支持APP 网页 小程序 调用本地客户端打印
小程序
zkmall18 小时前
ZKmall模块商城的推荐数据体系:从多维度采集到高效存储的实践
小程序·架构·开源·代码规范
源码哥_博纳软云18 小时前
JAVA国际版多商户运营版商城系统源码多商户社交电商系统源码支持Android+IOS+H5
android·java·ios·微信·微信小程序·小程序·uni-app
顾辰逸you19 小时前
uniapp--咸虾米壁纸项目(二)
前端·微信小程序
CRMEB定制开发1 天前
CRMEB私域电商系统后台开发实战:小程序配置全流程解析
小程序·开源软件·小程序商城·商城源码·微信商城·crmeb
Burt1 天前
#🎉 unibest 3.11了!快来看看新增了啥~
微信小程序·uni-app