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

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

Хочу сделать на блоках которых 4 в ряд шахматную сетку.
Через :nth-child не получаеться так как всего 4 элемента в ряд
Добавление стилей на определенные блоки делать не хочу так как при создании нормального проекта хотелось бы понимать как это работает
Визуализуально
5b9068cc17a6e125732147.png
Если через nth
5b906a9320a22272928056.png
  • Вопрос задан
  • 916 просмотров
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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Full-Stack для сайта на Bitrix (Аспро). Знания в Java, CSS и PHP
12 нояб. 2024, в 16:00
150000 руб./за проект
Разместить шаблон сайта с личным кабинетом под хостинг серверов
28 нояб. 2024, в 00:33
5000 руб./за проект
Нужно записать видео уроки по машинному обучению
28 нояб. 2024, в 00:20
2400 руб./за проект
Ещё заказы