gird布局隔行格列修改样式

最新推荐文章于 2024-09-12 16:43:23 发布

两袖青蛇道剑来i

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量437

点赞数 9

分类专栏： CSS相关文章标签：前端 css3

本文链接：https://blog.csdn.net/zh15155376915/article/details/135378965

版权

CSS相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章详细描述了如何使用CSS的:nth-child伪类选择器以及不同的计算公式an+b（如4n+1,6n+1等），在不同列数的网格布局中实现隔行添加边框效果。

摘要由CSDN通过智能技术生成

使用 nth-child 选择器和公式 an + b

两列隔行

  <view class="testGird2">
          <view class="_item" v-for="(item, index) in 10" :key="index">
            <view class="_text">{{ index + 1 }}</view>
            <view class="_cont"> </view>
          </view>
 </view>

.testGird2{
  display: grid;
  grid-template-columns: repeat(2, 3fr);
  ._item {
    padding: 5px;
    // 奇数行
    &:nth-child(4n + 1),
    &:nth-child(4n + 2) {
      border:3px solid  green; 
    }
    // 偶数行
    &:nth-child(4n + 3),
    &:nth-child(4n + 4){
      border:3px solid  red; 
    }
  }
}

三列隔行

 <view class="testGird3">
          <view class="_item" v-for="(item, index) in 12" :key="index">
            <view class="_text">{{ index + 1 }}</view>
            <view class="_cont"> </view>
          </view>
        </view>

.testGird3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  ._item {
    padding: 5px;
    // 奇数行
    &:nth-child(6n + 1),
    &:nth-child(6n + 2),
    &:nth-child(6n + 3) {
      border:3px solid  green; 
    }
    // 偶数行
    &:nth-child(6n + 4),
    &:nth-child(6n + 5),
    &:nth-child(6n + 6) {
      border:3px solid  red; 
    }
  }
}

四列隔行

<view class="testGird4">
          <view class="_item" v-for="(item, index) in 12" :key="index">
            <view class="_text">{{ index + 1 }}</view>
            <view class="_cont"> </view>
          </view>
        </view>

.testGird4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  ._item {
    padding: 5px;
    // 奇数行
    &:nth-child(8n + 1),
    &:nth-child(8n + 2),
    &:nth-child(8n + 3),
    &:nth-child(8n + 4) {
      border:3px solid  green; 
    }
    // 偶数行
    &:nth-child(8n + 5),
    &:nth-child(8n + 6),
    &:nth-child(8n + 7),
    &:nth-child(8n + 8) {
      border:3px solid  red; 
    }
  }
}

五列隔行

 <view class="testGird5">
          <view class="_item" v-for="(item, index) in 15" :key="index">
            <view class="_text">{{ index + 1 }}</view>
            <view class="_cont"> </view>
          </view>
        </view>

.testGird5{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  ._item {
    padding: 5px;
    // 奇数行
    &:nth-child(10n + 1),
    &:nth-child(10n + 2),
    &:nth-child(10n + 3),
    &:nth-child(10n + 4),
    &:nth-child(10n + 5) {
      border:3px solid  green; 
    }
    // 偶数行
    &:nth-child(10n + 6),
    &:nth-child(10n + 7),
    &:nth-child(10n + 8),
    &:nth-child(10n + 9),
    &:nth-child(10n + 10) {
      border:3px solid  red; 
    }
  }
}

隔列

  <view class="testGird6">
          <view class="_item" v-for="(item, index) in 15" :key="index">
            <view class="_text">{{ index + 1 }}</view>
            <view class="_cont"> </view>
          </view>
        </view>

.testGird6{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  ._item {
    padding: 5px;
    // 奇数行
    &:nth-child(6n + 1),
    &:nth-child(6n + 3),
    &:nth-child(6n + 5) {
      border:3px solid  green; 
    }
    // 偶数行
    &:nth-child(6n + 2),
    &:nth-child(6n + 4),
    &:nth-child(6n + 6) {
      border:3px solid  red; 
    }
  }
}