Css. Шахматный порядок из 2х колонок

Question

Подскажите пожалуйста, как сделать шахматный порядок с помощю nth-child() из 2х элементов в строке, массив может быть неограничен. пыталась сделать таким путем, но все равно по середине все сбивается

<div class="items-wrap"> //- примерная разметка
  <div/>
  <div/>
  <div/>
  <div/>
  <div/>
  <div/>
</div>

div:nth-child(3n), div:nth-child(3n-1){background: blue;}
div:nth-child(3n+1), div:nth-child(8n) {background: red;}

.items-wrap {
  width: 100px;
}
.items-wrap>div {
  width: 40px;
  height: 40px;
  display:inline-block;
  border: 1px solid black;
}

.items-wrap>div:nth-child(3n),
.items-wrap>div:nth-child(3n-1) {
  background: blue;
}

.items-wrap>div:nth-child(3n+1),
.items-wrap>div:nth-child(8n) {
  background: red;
}

<div class="items-wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

вам следует закрасить в первом столбце индексы 1 5 9, что соответствует 4n+1, во втором 4-8-12, то есть 4n

.items-wrap {
  width: 100px;
}
.items-wrap>div {
  width: 40px;
  height: 40px;
  display:inline-block;
  border: 1px solid black;
  color: white;
  text-align: center;
  line-height: 40px;
}
.items-wrap > div {
  background-color: blue;
}

.items-wrap > div:nth-child(4n+1),
.items-wrap > div:nth-child(4n){
   background-color: red;
}

<div class="items-wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
</div>

Answer 2

.items-wrap {
  width: 100px;
}
.items-wrap>div {
  width: 40px;
  height: 40px;
  display:inline-block;
  border: 1px solid black;
  background: blue;
}

.items-wrap>div:nth-child(4n-3),
.items-wrap>div:nth-child(4n) {
  background: red;
}

<div class="items-wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

БЛОГ НА HUSL

Css. Шахматный порядок из 2х колонок

Ответы (2 шт):