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

Question

[Шигаев.]

Потребовалось создать макет в газетном стиле. Блоки анонсов должны быть разделены вертикальными линиями с учётом адаптивной вёрстки. При увеличении или уменьшении экрана с flexbox или grid (либо js), рамки будут неизбежно отображаться справа или слева. Этого нужно избежать, оставляя рамки лишь между блоками.

Правильно: article | article | article | article
Правильно: article | article | article
Правильно: article | article
Правильно: article

Не правильно: | article | article | article | article
Не правильно: | article | article | article
Не правильно: | article | article
Не правильно: | article

Comments

[Ankhena]

Если не подходит (неизвестен) nth-child, то просто задвинуть за край родителя.

Answer 1

[Nekker]

вот один из способов, подойдет если background сплошным цветом https://codepen.io/nexxer/pen/xbKWWqo

Comments

[Шигаев.]

Тоже шикарный вариант — найду и ему применение. Но у меня получилось только с двумя колонками.

Answer 2

[Виктор Кожухарь]

Очень часто люди зацикливаются на флексах и гридах, и забывают о такой великолепной штуке как CSS columns. Они очень мощные и позволяют как раз стилизовать разделители.

Но... Есть нюанс... Columns - это колонки. Т.е. статьи будут заполняться колонками, а не строками, как в дефолтных grid или flex

Comments

[Шигаев.]

Спасибо! Как раз то что нужно. Не знал про columns. Буду изучать.

[Сергей delphinpro]

они как раз для "газетного" стиля