Question

I am working on a few projects to improve my HTML and CSS. One of which is a simple Sudoku solver. I need to create a Grid in which to put either Labels or TextBoxes. I want a grid layout exactly like the Grid image in this question.

What’s the best way of achieving this? CSS… or tables? And how would I go about creating this?

Answer 1

If it’s tabular data, you can use a table. If you want to stick with DIV’s, you can do that easily by setting specific width/height values for each parent cube, and the child cubs, and simply floating them left/right. Just be sure to use the clear fix to keep the content from flowing past their sibling tags if you decide NOT to use explicit width/height values.

#sudoku {
  width:297px;
  height:297px;
}
  .parentCube {
    width:99px;
    height:99px;
    float:left;
  }
    .childCube {
      width:33px;
      height:33px;
      float:left;
    }

<div id="sudoku">
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
  <div class="parentCube">
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
    <div class="childCube"></div>
  </div>
</div>