Angularjs arrange divs in nested rectangular manner - angularjs

Question

I have two arrays whose elements I want to display as nested divs:
$scope.boxes = [{
id:1,
isLit: false,
color: 'green'
}, {
id:2,
isLit: false,
color: 'blue'
}, {
id:3,
isLit: false,
color: 'red'
}, {
id:4,
isLit: false,
color: 'yellow'
}];
$scope.images=[
{
id:1, path: './img/Baum_grün.png', color:'green'
},
{
id:2, path: './img/Baum_blau.png', color:'blue'
},
{
id:3, path: './img/Baum_rot.png', color:'red'
},
{
id:4, path: './img/Baum_gelb.png', color:'yellow'
}
]
I want to arrange them in following manner (consider those stars being images):
Right now my template looks like following:
<div class="outer-wrapper">
<div class="inner-wrapper">
<div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-click="boxClick(box.id)" ng-audio="sounds/beep-08b.mp3" volume="0.5">
</div>
</div>
<div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="imageClick(image.id, image.color)">
<img src="{{image.path}}">
</div>
</div>
And my css:
.outer-wrapper {
width: 250px;
}
.inner-wrapper {
width: 200px;
}
.box {
position: relative;
height: 50px;
width: 50px;
border: 1px solid black;
margin: 10px;
float: left;
}
.green {
background-color: green;
opacity: 0.3;
}
.blue {
background-color: blue;
opacity: 0.3;
}
.red {
background-color: red;
opacity: 0.3;
}
.yellow {
background-color: yellow;
opacity: 0.3;
}
.lit {
opacity: 1.0;
}
.image img{
height: 50px;
width: 100px;
margin-top: 45px;
float: right;
border: 0.5px solid;
margin: 10px;
}
This much code gives me following result:
What and how should I modify my css/html to achieve the desired result, it also has be responsive at least till medium sizes screens ?

Answer 1

It's easy if you can use flexbox - the new layout mode in CSS3. You can read more about it here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you can use it, here's how you could do it:
<div id="first-container">
<div id="a">
a
</div>
<div id="b">
b
</div>
</div>
<div id="wrapper">
<div id="div-container">
<div id="x">
x
</div>
<div id="y">
y
</div>
</div>
<div id="div1-container">
<div id="z">
z
</div>
<div id="q">
q
</div>
</div>
</div>
<div id="second-container">
<div id="c">
a
</div>
<div id="d">
b
</div>
</div>
And the CSS:
#first-container, #second-container {
display: flex;
justify-content: space-between;
}
#wrapper {
display: flex;
flex-direction: column;
}
#div-container, #div1-container {
display: flex;
align-items: center;
justify-content: center;
}
#a, #c {
width: 20%;
border: solid 1px #000;
}
#b, #d {
width: 20%;
border: solid 1px #000;
}
Also, here's a working fiddle: http://jsfiddle.net/zeLh0foy/72/