Styling a sudoku grid

Question

I’ve created a sudoku puzzle creator / solver and need a bit of help with some CSS to style it.

Typically they are styled like this:

.

Some naming I’m us

Answer 1

I would create the Sudoku board as following:

and the LESS will be like this

@cell-size: 50px;
.sudoku {
  margin: 70px auto;  
  width: 478px;
  background: #777;    
  border: 2px solid #000;
  box-shadow: 15px 15px 20px #111;

  .sudoku-row {    
    .sudoku-square {      
      float: left;
      border: 1px solid #000;

      .cell:nth-child(3n+1) {
        clear: both;
      }
      .cell {
        float: left;        
        position: relative;
        height: @cell-size;
        width: @cell-size;
        background:#fff;        
        border: 1px solid #000;
        box-sizing: content-box;        

        a {
          margin: 0;
          padding: 0;
        }
        a.cell-value {
          display: block;
          font-size: 30px;            
          color: #000;
          width: @cell-size;
          height: @cell-size;
          text-align: center;          
        }

        a.cell-value:hover {
        text-decoration: none;
        }
      }      
    }
    clear: both;
  }
}

you can find a live demo here