Как убрать доп классы в разметке (грид контейнер)?

Question

[fedorovbox]

но чтобы было гибко
сейчас если убрать 5 и 6 элементы в грид контейнере - то будет "дырка" справа
https://jsfiddle.net/mck9Lh7o/1/

Comments

[Ankhena]

Баловаться с этим https://css-live.ru/articles/resheno-s-pomoshhyu-c...
Либо выяснять на JS и задавать нужный span последнему элементу.

Либо заменить на грид и последнему элементу задавать flex-grow: 1

[fedorovbox]

Ankhena, вроде таким образом решилось. Но проблема в том, что доп классы не могу убрать
https://jsfiddle.net/8d05ma3n/

[Ankhena]

fedorovbox,

Но проблема в том, что доп классы не могу убрать

Перепишите на nth-child, если сетка от порядка зависит

[fedorovbox]

Ankhena, так? https://jsfiddle.net/16hfnryv/
это будет вполне не костыльный вариант?

[Ankhena]

fedorovbox, нормально

[fedorovbox]

Ankhena, но если убрать 4, 5, 6 итемы - то будут проблемы ( третий не на всю ширину)
может можно исправить как-то
не совсем понимаю

.item:nth-last-child(4):first-child ~ .item  {
  grid-column: span 3;
}

[Ankhena]

fedorovbox, так и прописываете все ситуации

.item:nth-child(6n - 3):last-child {
grid-column: span 6;
}

и т.д.

Ну или как вы хотите их располагать, такие правила и задавайте.

[maketosLikes]

Ankhena, пробую
дырка осталась
https://jsfiddle.net/gxas12kL/

[Ankhena]

maketosLikes, так и где правило для случая, если последний четвертый?

[maketosLikes]

Ankhena, .item:nth-child(6n - 4):last-child

[Ankhena]

maketosLikes, когда всё так, то имеет смысл отдохнуть: поспать, погулять, почитать, фильмы хуже, но тоже вариант.

6n-4 это 2, а не 4

Для проверки срабатывания всегда можно добавить фоновый цвет или яркую рамку.

[maketosLikes]

Ankhena, так тоже пытался
https://jsfiddle.net/1y37zmbe/1/

[Ankhena]

maketosLikes, точно спать

Если остается 4 элемента: 3ий занимал 2 столбца, 4ый тоже 2 столбца. Свободными остаются 2.
Так почему же вы пишете, что 4ый должен занять 6 столбцов??

Когда варианта два: либо 3 и 4 по 3 столбца либо 4ый 4 столбца.

[maketosLikes]

Ankhena, 6n-4 это 2, а не 4
__________________
а как это считается? не совсем понимаю
подставляю 0 - то будет 4

[Ankhena]

maketosLikes, черт, а у меня 0 - 4 = -4
Что делать?

Answer 1

[Ankhena]

Держите

Comments

[fedorovbox]

Ankhena. спасибо огромное

[fedorovbox]

Ankhena , извините, за глупый вопрос
а я потом обойдусь без импортантов?
ведь сейчас в одну колонку я не выставлю без него ( в конце стилей пример)
https://jsfiddle.net/aLfnmu52/

а ведь еще десктопе ( где по 2)

[Ankhena]

fedorovbox, обойдетесь.
Во-первых, если прочитаете про специфичность селекторов. "Долго, навсегда и с гарантией результата". Это в любом случае нужно сделать.
Во-вторых, если будете писать media в неперекрывающихся интервалах. Тогда и переопределять не придется.
Аналог: https://qna.habr.com/q/1060762