Как сделать повторяющийся узор сетки css с заменой элементов местами? - PullRequest
Новая
       57

Как сделать повторяющийся узор сетки css с заменой элементов местами?

0 голосов
/ 05 августа 2020

В настоящее время у меня есть такая настройка В 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

б) А также иметь такую ​​вариацию 

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;
    }
}

Ответы [ 3 ]

1 голос
/ 05 августа 2020

попробуйте это 

.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>
0 голосов
/ 05 августа 2020

Вы можете попробовать, как показано ниже: 

.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>
0 голосов
/ 05 августа 2020

Вы можете сделать это с помощью grid-auto-flow: dense ( Ссылка MDN )

Это гарантирует отсутствие пробелов при изменении порядка 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>
...