Angular Square box layout

Question

I'm trying to achieve a square grid layout using css on ng-repeat items

Basically I need a Big square following with 4 small squares this 4 small sqares in sum have the same width and height as big square.

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 but after 5th element grid breaks

Fiddle: https://jsfiddle.net/enq1okge/4/

Answer 1

You will have to work out some nth-child trickery. Although not a bullet-proof solution, it could be a possible workaround if you do not want to depend on a third-party library.

Broad idea is to clear the float on every 1st, 6th, 11th, 16th.. and so on elements, and make the size approximately twice as much as others. Depending on the container's width you will have to work it out carefully.

In this case, it will be :nth-child(5n+1). Once you've figured that out, proceed to size those elements. For the bigger one, let it take approx half the width of container i.e. container-width / 2. For the rest, make them a quarter i.e. container-width / 4.

Here is a crude example snippet:

* { box-sizing: border-box; margin: 0; padding: 0; }
div.cont { 
	width: 80vw; clear: both; margin: 8px auto;
}
div.item { 
	float: left;
	background-color: #33e; margin: 1px;
	width: calc((80vw / 4) - 4px); height: calc((80vw / 4) - 4px);
}
div.item:nth-child(5n+1) {
	width: calc((80vw / 2) - 6px); height: calc((80vw / 2) - 6px);
	background-color: #e33; clear: left;
}

<div class="cont clearfix">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

And a fiddle for you to play with: : https://jsfiddle.net/abhitalks/95rx53o6/

Note: Keeping the container's size in percent or viewport relative units and then calculating the children's size based on that, will allow you to keep it responsive.