gird 网格布局 css justify-content属性 不生效问题

gird 网格布局 css justify-content属性 不生效问题

这里我写了一个vue 的for循环为例，供兄台们参考

<view class="use-content-list">
	<view class="use-list-item" v-for="(item, index) in printingUseList" :key="item.id" @tap="printingUseRadio(item.id, index)">
	  <view :class="['iconfont', index == useType ? 'icon-xuanzhong' : 'radio-icon' ]"></view>
	  <view class="item-content">{{item.content}}</view>
	</view>
</view>

问题解决的点就在css 指定网格列宽的部分 ：

justify-content 属性 针对的是每列的网格进行布局， 而非网格内的元素，
grid-template-columns: repeat(3, auto) 属性中第二个参数 这里的auto 是指每列的宽度， 如果设置成了 33.33% 或者 1fr 这种为每个网格平均分配宽度的情况，justify-content 属性自然是没有意义的，就会出现看上去无效的情况。

容易出现这种情况的写法有：
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(3, 1fr);

<style lang="scss" scoped>

  .use-content-list {
    padding-top: 26rpx;
    padding-bottom: 26rpx;
    display: grid;
    grid-template-columns: repeat(3, auto);  // 这里的auto 是指每列的宽度， 列宽不能设置成百分比的值或fr值 （例: 33.33% | 1fr），否则 justify-content 属性没有效果
    grid-template-rows: repeat(auto-fill, auto);
    grid-row-gap: 18rpx;
    grid-column-gap: 86rpx;
    grid-auto-flow: row dense;
    justify-content: space-between;

    .use-list-item {
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .item-content {
        padding-left: 20rpx;
      }
    }
  }

</style>

本人是小白，经验欠缺， 如有不足之处， 还望各位大佬见谅、
指正， 谢谢大家