I'm currently experimenting with CSS flexbox to create a grid layout where an image in one div spans the entire length of the parent div, while four other divs form a 2x2 grid next to it. Here's an example of what I'm trying to achieve: https://i.sstatic.net/00rIE.png
However, I'm encountering difficulties in properly structuring the 2x2 grid next to the first div. I am struggling to make sure that the grid always displays as 2x2 and that each div within it dynamically adjusts its width based on the size of the first div.
https://i.sstatic.net/sPUl9.png
The code snippet I am currently working with looks like this:
#intro-section {
padding-top: 16px;
padding-left: 32px;
display: inline;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 300px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
#img-box {
height: 200px;
width: 200px;
background-color: #f1f1f1;
margin: 32px;
text-align: center;
line-height: 75px;
font-size: 30px;
display: inline;
}<div id="intro-section">
<div class="flex-container">
<div id="img-box">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>Can anyone provide guidance on how I can restructure this grid to achieve a layout similar to the reference image I provided?