taro小程序9宫格带内边剧

//css
.grid-container {
  width: 100%;
  overflow: hidden;
  .grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin: -6px;
    .grid-item {
      width: 254rpx;
      height: 254rpx;
      padding: 3px;
      box-sizing: border-box;
      background: red;
      .image {
        width: 100%;
        height: 100%;
        background: black;
      }
    }
  }
}

//jsx
import Taro, {useState} from '@tarojs/taro'
import {View, Image} from '@tarojs/components'

import './login.scss'

const Login = () => {
  const [data] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9])

  return (
    <View className="grid-container">
      <View className='grid-wrapper'>
        {data.map((x) => (
          <View className='grid-item' key={x}>
            <Image className='image' />
          </View>
        ))}
      </View>
    </View>
  )
}

export default Login