Ustawienie DIVów w najbardziej kompatybilny prosty sposób

Jak w prosty sposób zrobić CSS'a by DIV'y ułożyły się w następujący sposób.

<div class="pojemnik">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<div class="d6"></div>		
</div>

.pojemnik{
	width: 260px;
	height: 160px;
}


.d1{
	width: 220px;
	height: 30px;
}

.d2{
	width: 40px;
	height: 30px;
}


.d3{
	width: 200px;
	height: 100px;
}

.d4{
	width: 60px;
	height: 100px;
}


.d5{
	width: 200px;
	height: 30px;
}

.d6{
	width: 60px;
	height: 30px;
}

Układ w załączniku

Myślę, że najlepszą opcją jest skorzystanie z https://www.w3schools.com/css/css_grid.asp albo https://developer.mozilla.org/pl/docs/Learn/CSS/CSS_layout/Flexbox. Nie jest to zadanie na 2 minuty dla kogoś, kto nie miał z tym do czynienia, ale moim zdaniem warto zapoznać się z tymi mechanizmami.

A co do pytania, czy lepiej GRID czy FLEX - nie wiem, sam często się zastanawiam. Kwestia chyba głównie gustu/tego, w czym się poczujesz lepiej. Ja raczej wolę FLEX, ale to może z powodu fajniejszej nazwy ;) Aczkolwiek, po zastanowieniu się, wprawdzie ten efekt można osiągnąć oboma sposobami, ale bardziej odpowiedni będzie chyba GRID.