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 are 9 sudoku games with 9x9 sudoku grids inside.

body {
  margin: 0;
  padding: 0;
}
div {
  overflow: hidden;
  box-sizing: border-box;
}
.outer-grid {
  position: relative;
  float: left;
  width: 33.3%;
  padding-bottom: 33.3%;
  border: 1px solid gray;
  background-color: #9cc;
}
.outer-square {
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  height: 90%;
  background-color: #ccc;
  margin: 5%;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}
.inner-grid {
  width: 33.3%;
  height: 33.3%;
  border: 1px solid red;
  display: table;
}
.inner-square {
  line-height: 100%;
  font-size: 50px;
  font-weight: bold;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

  

    

      

        
1
      
      

        
2
      
      

        
3
      
      

        
4
      
      

        
5
      
      

        
6
      
      

        
7
      
      

        
8
      
      

        
9
      
    
  
  

    

      

        
1
      
      

        
2
      
      

        
3
      
      

        
4
      
      

        
5
      
      

        
6
      
      

        
7
      
      

        
8
      
      

        
9
      
    
  
  

    

      

        
1
      
      

        
2
      
      

        
3
      
      

        
4
      
      

        
5
      
      

        
6
      
      

        
7
      
      

        
8
      
      

        
9
      
    
  
  

    

      

        
1
      
      

        
2
      
      

        
3
      
      

        
4
      
      

        
5
      
      

        
6
      
      

        
7
      
      

        
8
      
      

        
9
      
    
  
  

    

      

        
1
      
      

        
2
      
      

        
3
      
      

        
4
      
      

        
5
      
      

        
6
      
      

        
7
      
      

        
8
      
      

        
9
      
    
  
  

    

      

        
1
      
      

        
2
      
      

        
3
      
      

        
4
      
      

        
5
      
      

        
6
      
      

        
7
      
      

        
8
      
      

        
9
      
    
  
  

    

      

        
1
      
      

        
2
      
      

        
3
      
      

        
4
      
      

        
5
      
      

        
6
      
      

        
7
      
      

        
8
      
      

        
9
      
    
  
  

    

      

        
1
      
      

        
2
      
      

        
3
      
      

        
4
      
      

        
5
      
      

        
6
      
      

        
7
      
      

        
8
      
      

        
9
      
    
  
  

    

      

        
1
      
      

        
2
      
      

        
3
      
      

        
4
      
      

        
5
      
      

        
6
      
      

        
7
      
      

        
8
      
      

        
9