PHP / CSS Как добиться стиля шахматной доски

Question

Я пытаюсь добиться следующего, используя PHP и CSS:

1 0 1 0
0 1 0 1
1 0 1 0
0 1 0 1

Используя один класс, поэтому 1 будет классом темноты, а 0 - классом света.

Вот что я пытаюсь создать:

Мне удалось добиться этого с помощью селекторов nth-child, но не очень, особенно если добавить еще.

Я использую WordPress, и количество блоков будет зависеть от количества постов под пользовательским типом поста, в настоящее время их 20, но это будет увеличиваться.

Упрощенный пример:

.wrap{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 300px;
}
.checker{
  background-color: rgba(43,55,140,.8);
}
.checker:nth-child(n+2):nth-child(even):nth-child(-n+4),
.checker:nth-child(n+5):nth-child(odd):nth-child(-n+8),
.checker:nth-child(n+9):nth-child(even):nth-child(-n+12){
  background-color: rgba(181,230,254,.8);
}

<div class="wrap">
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
    <div class="checker"></div>
</div>

Любая помощь будет принята с благодарностью!

Answer 1

(по телефону, поэтому прошу прощения за описание без кода).

Не имеет опыта работы с WordPress, но в коде не указано фиксированное количество элементов в строке (поскольку вы используете стили bootstrap).

Теперь было бы просто, если бы вы знали количество элементов в строке, так как вы можете просто кратко описать это nth-child.

Например, предположим, что это 4 элемента в строке. Тогда 8n, 8n + 1, 8n + 3 и 8n + 6 темные, что вы можете проверить визуально.

Конечно, в ответной реакции мы не обязательно знаем, насколько широким будет ряд. Но! Вы используете стили bootstrap, так что вы знаете (с предостережениями), так как знаете медиазапросы, например, когда вы переключаетесь с col-md-4 на col-xs-12.

Итак, моя мысль состоит в том, чтобы иметь набор n-ых дочерних правил для каждой такой точки останова.

EDIT

В общем, если строка имеет ширину x элементов, правила 2x + y - это простой способ создать контрольную панель, используя правила nth-child, когда сами элементы / div не имеют особых организация.

Answer 2

Возможно, самый простой способ добиться этого - вставлять пустой элемент после каждого 4-го деления.

Это позволит вам создать шахматную доску, похожую на раскраску, просто используя :nth-child(odd)

Я не использую PHP, но, вероятно, есть оператор по модулю. Код может выглядеть примерно так:

if ($i % 5 == 0) {
   // Create empty element.
}

Пример:

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  width: 25%;
  padding-top: 25%;
  background: lightblue;
}

.container > div:nth-child(odd) {
  background: blue;
}

.container > .empty {
  width: 0;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="empty"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="empty"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="empty"></div>
</div>