Как добавить автоматическое добавление квадратов на CSS?

Question

[L_B_A]

Была небольшая задача на CSS добавить внутри квадрата квадраты меньше и другим цветом. Решил данную задачу вот так - https://codepen.io/LBA/pen/WVzmye
Но прозвучал вопрос как можно добавлять квадраты и при этом не "стереть локти"? Т.е. так понимаю это не задавать ширину и высоту для дочернего элемента:

Подскажите, пожалуйста, как автоматизировать этот процесс добавления дочерних квадратов?

Comments

[ReaverJS]

Так?

[L_B_A]

ReaverJS, да, очень крутое решение, спасибо :)

[Aetae]

Или так:

Answer 1

[Ivan Bogachev]

Ну строго говоря для решения задачи "на CSS добавить внутри квадрата квадраты меньше и другим цветом" достаточно одного div-элемента (нет нужды добавлять новый элемент на каждый декоративный квадрат).



Но лучше все же уточнить у задавшего вопрос, что значит "не стереть локти" в его понимании.