Задать вопрос
xandri
@xandri
Люблю айтшечку
javascript

Как сделать шахматную сетку с учетом адаптива на 4 элемента в ряд?

Хочу сделать на блоках которых 4 в ряд шахматную сетку.
Через :nth-child не получаеться так как всего 4 элемента в ряд
Добавление стилей на определенные блоки делать не хочу так как при создании нормального проекта хотелось бы понимать как это работает
Визуализуально
5b9068cc17a6e125732147.png
Если через nth
5b906a9320a22272928056.png
  • Вопрос задан
  • 894 просмотра
4 комментария
Подписаться 2 Простой 4 комментария
Решения вопроса 2
TheShock
@TheShock
Я тут поэкспериментировал. Мне кажется, задача в такой постановке нерешаема, увы. Вам необходимо подобрать значения a и b функции y=a*x+b такие, чтобы получить следующие результаты:

5b5idtkx59wb31bokrkqwvtkcdo.png

Как видите, функция линейная, а нам нужен волнистый график. Возможно, можно написать несколько графиков, которые перекрывают друг друга, но сложность поддержки будет запредельной. Самый простой вариант (если принципиально сделать это в css без изменения кода или html) - вручную указать все элементы, которые необходимо покрасить:

https://codepen.io/anon/pen/BOdMpP

div b:nth-child(1),
div b:nth-child(3),
div b:nth-child(6),
div b:nth-child(8),
div b:nth-child(9),
div b:nth-child(11),
div b:nth-child(14),
div b:nth-child(16) {
  background: #666;
}


EDIT: Хотя я посмотрел внимательнее на доску 8*8. У нас получается два линейных графика (в колонке B
и C - номера клеток, которые должны быть покрашены), но я пока не могу придумать, как вставить эти разрывы:
ld7t_56djc91wyvyumytyhxysri.png
Ответ написан
Комментировать
Комментировать
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
У меня - получается...
.cell:nth-child(odd) {   background:#CCC; }
.cell:nth-child(even) {   background:#555; }
5b9069a50ad13730645161.png
spoiler
<body>
<div class="field">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">11</div>
<div class="cell">12</div>
<div class="cell">13</div>
<div class="cell">14</div>
<div class="cell">15</div>
<div class="cell">16</div>
<div class="cell">17</div>
<div class="cell">18</div>
<div class="cell">19</div>
<div class="cell">20</div>
<div class="cell">21</div>
<div class="cell">22</div>
<div class="cell">23</div>
<div class="cell">24</div>
<div class="cell">25</div>
</div>
</body>

UPD:
Для доски 4x4 (css):
.cell:nth-child(2n), .cell:nth-child(n+5) {background:#CCC;}
.cell, .cell:nth-child(2n+6), .cell:nth-child(n+8) {background:#555;}
.cell:nth-child(2n+10), .cell:nth-child(n+12) {background:#CCC;}
.cell:nth-child(2n+14) {background:#555;}
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ответы на вопрос 1
@Nonegop
Ну если только перекрашивать элементы во втором ряду

на скорую руку https://jsfiddle.net/Nonegop/2wcnmjk7/7/
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработать обмен заказами 1с
11 мая 2024, в 00:19
1000 руб./за проект
Разработка сайта (верстка)
10 мая 2024, в 23:51
30000 руб./за проект
Опубликовать приложение в Google play
10 мая 2024, в 23:33
2500 руб./за проект
Ещё заказы