微信小程序支持cas3的grid 布局吗？

Question

Css 3的网格布局能用在小程序里面吗？

Answer 1

7七月 2022-08-19 17:45:30

这个理论上应该可以用，可以自己尝试下，我没有在小程序里用过

• 提问者 oop001 #1

  <view class="container">
    <view class="item">1</view>
    <view class="item">2</view>
    <view class="item">3</view>
    <view class="item">4</view>
    <view class="item">5</view>
    <view class="item">6</view>
    <view class="item">7</view>
    <view class="item">8</view>
    <view class="item">9</view>
  </view>
  .container{
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(3,1fr);
    justify-content: space-evenly;
    align-items: center;
    row-gap: 1rpx;
    column-gap: 2rpx;
    width: 100%
  }
  .item{
    width: 100%;
    height: 100%;
    background:green;
    text-align: center;
    box-sizing: border-box;
    text-align: center;
    justify-self: center;
  }
  .item:nth-of-type(1){
      grid-area: 1/1/3/3 ;
  }
  尝试了下，是可以的