Как сделать нестандартную раскладку?

Question

[frontAng]

Comments

[frontAng]

Ankhena, не подскажете? вариант delphinpro близкий
но не совсем

[Ankhena]

frontAng, хоть флексами хоть гридами и сдвиг марджином или трансформом для nth-child.
Там все ответы об этом.

[frontAng]

Ankhena, высота у каждого итема одинаковая
а не разная

[Ankhena]

frontAng, так ради бога.
Без сдвига можете сделать с одинаковой высотой?
Потом сделайте сдвиг.

[frontAng]

Ankhena, суть в том, что нужна разная высота
https://codepen.io/frontAng/pen/LYrRREV

[Ankhena]

frontAng, как это понять из вопроса? На скрине они явно одинаковые. А с запятыми и формулировками в комментариях вы не очень дружны.

Тогда вам помогут плагинчики типа masonry.
Либо css columns, если устроит порядок расположения элементов по столбцам.

[frontAng]

Ankhena, А если данная штука будет натягиваться на ангуляр? И получается, что masonry - нельзя. Колонки тоже.

[Ankhena]

frontAng, эмммм..
Может, погуглите?
А то как-то неловко.

[frontAng]

Ankhena, та я вкурсе , что есть ngx-masonry.
Но это не отменяет, что это масонри

[Ankhena]

frontAng, пишите свой, раз чужие не подходят. Что ещё сказать...

[frontAng]

Ankhena, ясно. Спасибо за ответы)

[frontAng]

Ankhena, а css columns разве подойдет? Меняется порядок так, что нужно извращаться с nth-child.
Или там не должно быть проблем?

[frontAng]

Ankhena Например, nth-child(3n-1)не будет корректно работать

[Ankhena]

frontAng, про то, что меняется порядок я вроде сразу написала.
Но, нет, я неправа и columns вообще не подойдет, потому что nth-child без js вообще не вычислить.

[Ankhena]

frontAng, я не мастер angular, но по моим знаниям совсем не понятно как и почему angular противоречит masonry.

Есть скрипты делающие аналогичную раскладку из грид сетки.
Их вам тоже нельзя?

Answer 1

[Егор Данченко]

Задайте блоку по середине position: relative и отрицательный bottom: Пример.
В примере показан nth-child(), но советую использовать модификаторы БЭМ.

Answer 2

[Noder SS]

Минусовым отступом, по типу margin-bottom: -10px;