Flexbox шахматный вид

[MRD555]

Помогите пожалуйста, я тут запоролся конечно и никак не могу сделать отступы с помощью свойства "gap" так как выходит за пределы нужного размера, и не знаю как реализовать по другому, буду очень благодарен за помощь

<div class="blog-flex">
                    <div class="flex-item flex-1">
                        <img class="img-fluid" src="./img/blog/seo.png" alt="">
                        <div class="blog__item__info">
                            <h3 class="blog__item__title">SEO Quis Vestibulum</h3>
                            <div class="data">
                                <span class="number-date fa-data" style="font-weight: 600">14.0702017</span>
                                <span class="file-name fa-name" style="font-weight: 600">Development</span>
                                <div class="item__desc">Dolore magna aliqua. Ut enim ad minim veniam, quis 
                            nostrud exer
                              </div>
                            </div>
                        </div>
                    </div>
                      <div class="flex-item flex-2">
                        <img class="img-fluid" src="./img/blog/seo.png" alt="">
                        <div class="blog__item__info">
                            <h3 class="blog__item__title">SEO Quis Vestibulum</h3>
                            <div class="data">
                                <span class="number-date fa-data" style="font-weight: 600">14.0702017</span>
                                <span class="file-name fa-name" style="font-weight: 600">Development</span>
                                <div class="item__desc">Dolore magna aliqua. Ut enim ad minim veniam, quis 
                            nostrud exer
                              </div>
                            </div>
                        </div>
                    </div>
                      <div class="flex-item flex-3">
                        <img class="img-fluid" src="./img/blog/seo.png" alt="">
                        <div class="blog__item__info">
                            <h3 class="blog__item__title">SEO Quis Vestibulum</h3>
                            <div class="data">
                                <span class="number-date fa-data" style="font-weight: 600">14.0702017</span>
                                <span class="file-name fa-name" style="font-weight: 600">Development</span>
                                <div class="item__desc">Dolore magna aliqua. Ut enim ad minim veniam, quis 
                            nostrud exer
                            </div>
                            </div>
                        </div>
                    </div>
                    </div>

.blog-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-2 {
    flex-direction: row-reverse;
}

.flex-2 .blog__item__info {
    padding-left: 0;
}

.blog__item__info {
    padding: 0  35px;
    margin-bottom: 140px;
}

.blog__item__title {
    font-size: 24px;
}
.blog__item__title:hover {
    color: green;
    cursor: pointer;
}

.file-name {
    margin: 0 0 20px 0;
}

.fa-data {
    background-image: url(../img/blog/icon/calendar.png);
    background-repeat: no-repeat;
    width: 17px;
    height: 18px;
    padding: 0 37px 0 25px;
}

.fa-name {
    background-image: url(../img/blog/icon/file.png);
    background-repeat: no-repeat;
    width: 17px;
    height: 18px;
    padding: 0 0 0 25px;
}

.item__desc {
    margin-top: 30px;
}

[Urii]

<div class="flexbox">
  <div class="box">
    <img class="pic" src="development.jpg" alt="">
  </div>
  <div class="box">
    <section>
      <h3 align="center">SEO Quis Vestibulum</h3>
      <span class="into">14.0702017</span>
      <span class="into">Development</span>
      <p>Dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer</p>
    </section>
  </div>
  <div class="box">
    <section>
      <h3 align="center">SEO Quis Vestibulum</h3>
      <span class="into">14.0702017</span>
      <span class="into">Development</span>
      <p>Dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer</p>
    </section>
  </div>
  <div class="box">
    <img class="pic" src="becoming.jpg" alt="">
  </div>
  <div class="box">
    <img class="pic" src="frontend.jpg" alt="">
  </div>
  <div class="box">
    <section>
      <h3 align="center">SEO Quis Vestibulum</h3>
      <span class="into">14.0702017</span>
      <span class="into">Development</span>
      <p>Dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer</p>
    </section>
  </div>
</div>

Получилось что-то похожее на разультат, используя "flex" и "gap":

.pic {
	width: 600px;
	height: 600px;
	border: 1px solid black;
	margin: 0px;
	padding: 0px;
}
.flexbox {
	display: flex;
	width: 1250px;
	flex-flow: row wrap;
	gap: 5px;
}
.box {
	display: flex;
	width: 600px;
	height: 600px;
	
}
.into {
	font-size: 15px;
	font-weight: bold;
	margin-left: 50px;
	margin-right: 50px;
}