Как сделать блок, который шире своего родителя?

Question

[Emmet1]

Есть обычная страница на которой выводятся блоки (лента новостей) с помощью цикла. и боковая колонка с меню и последними комментариями. После второй новости идет блок new-box (зеленый), шириной как content и sidebar. Но находится он внутри блока content.
Как правильно реализовать такой блок?
Для наглядности скинул структуру и картинку как оно все выглядит.

<div class="content">
<div class="new">
</div>
<div class="new">
</div>
<div class="new-box">
</div>
<div class="new">
</div>
<div class="new">
</div>
</div>
<div class="sidebar">
</div>

Answer 1

[approximate solution]

Css Grid Layout отлично подойдет.
https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%...
https://grid.layoutit.com/

Высчитываете размеры блоков, и через grid-template-areas крутите и выстраиваете блоки как угодно.

Comments

[Emmet1]

А кроме гридов есть варианты?

[approximate solution]

Emmet1, Можно заморочится с флексами, но гриды это коротко, удобно, и лаконично.

[Emmet1]

approximate solution, в моем случае это долго. так как с гридами не знаком, да и сайт уже готовый, приходиться работать с тем что есть.

Попробовал сделать с помощью грид - у меня только верстка вся слетает.