Как сделать шахматный порядок с помощью nth-child?

Question

[Skrolea]

Есть 4 карточки Пример в два ряда.
Первая имеет ширину 100%-320px, вторая ширину 320 пикселей. Т.е. одна широкая, вторая узкая. На втором ряду я хочу, чтобы было наоборот - первая была узкая, а вторая широкая. И следующий ряд опять наоборот. Могу ли я это сделать с помощью

.card-full:nth-child(что-то) {
    width: calc(100% - 320px);   
}

?
Не могу сообразить. Если делать через четные, нечетные - то ряды будут одинаковые, а надо чтобы отличались.

Answer 1

[Андрей Федоров]

Ну, у вас широкие блоки получаются под номерами 1, 4, 5, 8, 9 и т.п. Отсюда можно вывести формулу, точнее две:

.card-full:nth-child(4n),
.card-full:nth-child(4n + 1) {
    width: calc(100% - 320px);   
}

Comments

[Skrolea]

Да, я про две формулы и не подумал, зациклился на одной. Спасибо

Answer 2

[Сергей Горячев]

Подобрать разве что, руками формулу.
Типа, 1 и 4 большие, 2 и 3 маленькие.
А потом через калькулятор формулу построить.
Не знаю, попробуйте) Не совсем может уловил мысль)

Comments

[Skrolea]

Ну да, в общем, я и не смог подобрать формулу, спасибо.