How to add automatic addition of the squares on CSS?

There was a small problem in the CSS add inside the square the squares smaller and a different color. I decided this problem so https://codepen.io/LBA/pen/WVzmye
But the question was asked how to add the squares and it does not "wipe elbows"? Ie understand it is not to define width and height for the child:
5e4ad931187c4737550468.jpeg
Please tell me how to automate the process of adding subsidiaries of the squares?
April 7th 20 at 15:33
1 answer
April 7th 20 at 15:35
Solution
Well, strictly speaking, to solve the problem "in the CSS to add in the square the squares smaller and a different color" just one div element (no need to add a new decorative element on each square).



But still better to clarify I have asked the question, what does "erase the elbows" in his understanding.

Find more questions by tags CSS