如何使用元素交换位置制作重复的 CSS 网格图案？答案

【问题标题】：How to make a repeating css grid pattern with elements swapping places?如何使用元素交换位置制作重复的 CSS 网格图案？
【发布时间】：2020-08-05 07:50:01
【问题描述】：

目前我有这样的设置在 html 中一个简单的父容器，其中 A、B、C 子元素重复。

A | B
_____ 

  C

A | B
_____

  C

A | B
_____

  C

a) 通过只更改 css（而不是 html），我想将顺序更改为这样

B | A
_____ 

  C

B | A
_____

  C

B | A
_____

  C

b) 还有这样的变种

A | B
_____ 

  C

B | A
_____

  C

A | B
_____

  C

这样的模式应该永远重复

我的代码：

.grid{
    display:inline-grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows:0 50px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    // A
    & :nth-child(3n+1) { 
        vertical-align: bottom;
        position:relative;
        bottom:-22px;
        right:15px;
    }
    // B
    & :nth-child(3n+2) {
        position:relative;
        left:-3px;
    }
    // C
    & :nth-child(3n+3)  {
        grid-column: span 2; 
        justify-self: center;
    }
}

【问题讨论】：

标签： css sass css-grid

【解决方案1】：

试试这个

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
}

.grid div:nth-child(3n+3) {
  grid-column: span 2;
}

.first-variation div:nth-child(3n+1) {
  grid-column: 2;
}

.second-variation div:nth-child(6n+4) {
  grid-column: 2;
}

/* only for testing */
.grid div:nth-child(3n+1)::before {
  content: 'A';
  color: red;
}

.grid div:nth-child(3n+2)::before {
  content: 'B';
  color: blue;
}

.grid div:nth-child(3n+3)::before {
  content: 'C';
  color: green;
}

div {
  text-align: center;
  padding: 8px;
  outline: 1px solid;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid first-variation">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="grid second-variation">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

【讨论】：

【解决方案2】：

您可以使用grid-auto-flow: dense (MDN reference) 来实现

这将确保在您恢复 A 和 B（分别为 6n + 4 和 6n + 5）的顺序时没有空格

这是最后一种情况的代码：

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: 50px;
}

.grid div {
  outline: 1px #ccc dotted;
}

.grid :nth-child(6n + 4) {
  grid-column: 2 / 3;
}

.grid :nth-child(6n + 5) {
  grid-column: 1 / 2;
}

.grid :nth-child(3n) {
  grid-column: 1 / -1;
}

<main class="grid">
  
  <div>A</div>
  <div>B</div>
  <div>C</div>
  
  <div>A</div>
  <div>B</div>
  <div>C</div>

  <div>A</div>
  <div>B</div>
  <div>C</div>
</main>

【讨论】：

【解决方案3】：

您可以尝试如下：

.grid {
  display: grid;
  grid-auto-flow: dense;
}

.grid > * {
  border: 1px solid red;
  padding:10px;
  text-align:center;
}

.grid > :nth-child(6n + 4) { /* OR (3n + 1) for the first variation */
  grid-column: 2;
}


.grid > :nth-child(3n) {
  grid-column: span 2;
}

<main class="grid">
  
  <div>A</div>
  <div>B</div>
  <div>C</div>
  
  <div>A</div>
  <div>B</div>
  <div>C</div>

  <div>A</div>
  <div>B</div>
  <div>C</div>
</main>

【讨论】：