Как сверстать такой блок с сеткой?

Question

[neradovski]

Как это реализовать, какие есть варианты?

Answer 1

[Дмитрий Самойлов]

Сделать один div
поместить туда 5 других, задать 4 width: 50%, а последнему 100%
для границ использовать border: 1px solid #цвет
для скругления блока border-radius

Comments

[neradovski]

Как реализовать нижний бордер. может просто вырезать и вставить через befor

Answer 2

[Артем Федоров]

<div class="name">
<article>Текст 1</article>
<article>Текст 1</article>
<article>Текст 1</article>
<article>Текст 1</article>
<main>Большой блок</main>
</div>

.name {display:flex;flex-wrap:wrap}
.name>article {width:46%;padding:2%; border-top:1px grey solid;border-left:1px solid grey;border-right:1px solid grey;}
.name>main {width:100%; background: url("ссылка на изображение"); background-size:100%;"}

Нижние рамки в любом случае придётся вырезать из psd и сохранять как png.

Answer 3

[r_g_b_a]

https://jsfiddle.net/1w3y4xsn/