Responsive grid of squares within a responsive grid of squares

Question

I am trying to make a grid of responsive squares, with each square in the grid containing another grid of responsive squares. Think of a sudoku board, which has 9 squares, each

Answer 1

I'm suggesting another approach - you can decide for yourself if it will be convinient in the long run:

https://jsfiddle.net/3t17kuzu/3/

The example is with a 33.3% width of the elements.

.sg-3 {
    width: 33.3333%;
    float: left;
    position: relative;
    height: 0;
    padding-top: 33%;
    position: relative;
    outline: 1px solid black;
}