Attempting to create a square grid layout using CSS for ng-repeat items.
Essentially, I am looking to have one big square followed by four smaller squares that combined have the same width and height as the big square.
Here is my CSS:
.container{
width: 1398px;
}
.item{
float: left;
margin: 3px;
overflow: hidden;
width: 460px;
height: 460px;
background-color:black;
}
.item:nth-of-type(2n),
.item:nth-of-type(3n),
.item:nth-of-type(4n),
.item:nth-of-type(5n) {
width: 227px;
height: 227px;
}
.item:nth-of-type(4n){
margin-left: -230px;
margin-top: 236px;
}
.item:nth-of-type(5n){
margin-left: -463px;
margin-top: 236px;
}
Everything works well until after the 5th element, then the grid breaks.
Fiddle: https://jsfiddle.net/enq1okge/4/