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

Here is my solution :) not for 9x9 but you can edit it to fit your needs, this solution includes bootstrap for responsive look, https://jsfiddle.net/noLm1r45/16/here is the soulution.

HTML :

CSS:

.out{
  position:relative;
  min-height:100px;
  padding:10px;

}
.in{

  position:relative;
  min-height:13%;
  height:13%;
  display:block;
}
.row{
  position:relative;
  min-height:100%;
  height:100%;

}
.content_out{
  position:relative;
  margin:5px;
  background:red;
  min-height:80%;
  display:block;
}
.content_in{

  margin:5px;
  background:yellow;

  min-height:40px;
  display:block;

}