小程序CSS 一行三列布局

1、grid网格布局

.num-wrap {
  // grid网格布局
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 10px;
}
 
.num-item {
  background-color: #CB812E;
  color: #ffffff;
  height: 80px;
}

2、flex弹性布局 + 伪类选择器

.num-wrap {
  // flex弹性布局
  display: flex;
  flex-wrap: wrap;
}
 
.num-item {
  background-color: #CB812E;
  color: #ffffff;
  height: 80px;
  width: calc((100% - 20px) / 3);
  margin-right: 10px;
  margin-top: 10px;
}
 
// 使用css 伪类选择器
.num-item:nth-child(3n) {
  margin-right: 0;
}

标签：程序css小程序