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 containing 9 squares.

I started with this: Grid of responsive squares and used the flexbox answer, which was laid out here: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

I originally thought that it would work if I just put another responsive square grid inside of the first one. But the content div just becomes 0px and you don't see anything. I've tried clearfix, but got the same result. After hours of going in circles, I've gotten nowhere. What am I missing? Is there a JS solution that is better?

html:

 <div class='square-grid'>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
     <div class='interior-square-grid'>
       <div class='interior-square-grid__cell square-grid__cell--3'>
        <div class='interior-square-grid__content'>
        3
        </div>
       </div>
     </div>
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--3'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
</div>

css:

  .square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.interior-square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.interior-square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px green;
  overflow: hidden;
  position: relative;
}

.interior-square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.interior-square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

.interior-square-grid__cell--10 {
  flex-basis: 10%;
}

.interior-square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.interior-square-grid__cell--8 {
  flex-basis: 12.5%;
}

.interior-square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.interior-square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.interior-interior-square-grid__cell--5 {
  flex-basis: 20%;
}

.interior-square-grid__cell--4 {
  flex-basis: 25%;
}

.interior-square-grid__cell--3 {
  flex-basis: 33.333%;
}

.interior-square-grid__cell--2 {
  flex-basis: 50%;
}

.interior-square-grid__cell--1 {
  flex-basis: 100%;
}

JS fiddle: https://jsfiddle.net/emilmr/upozc9a3/

Answer 1

I believe your imbrication is not right.

You need a flex container with 9 flex child holding also 9 boxes. floating boxes will do also since your dealing with square boxes DEMO

 * { box-sizing: border-box; } body, .flex { display: flex; flex-wrap: wrap; } .flex, .flex>div { border: solid 1px; width: 33.33%; text-align: center; } .flex > div:before { display: inline-block; padding-top: 100%; content: ''; vertical-align: middle; } body { width:50%; min-width: 450px; margin:auto; font-size: calc(0.5vw + 10px); /* to hold here 3 letters, you can increase vw value for a single number */ } /* resize here or let window do it */ div:nth-child(odd){ background:rgba(0,0,0,0.25) } 

 <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> <div class="flex"> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> <div> sudo </div> </div> 

Answer 2

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 :

  <body>
<div class="row">
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">
     <div class="in col-xs-4 ">
      <div class="content_in">
      </div>
    </div>
   <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
        <div class="in col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">
     <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">

   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
       <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">
     <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>

    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">

   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
       <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
<div class="out  col-xs-4">
  <div class="content_out">
  <div class="row">

   <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in  col-xs-4">
          <div class="content_in">
      </div>
    </div>
        <div class="in col-xs-4">
          <div class="content_in">
      </div>
    </div>
       <div class="in  col-xs-4">
      <div class="content_in">
      </div>
    </div>
    </div>
  </div>
</div>
</div>
</body>

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;

}

Answer 3

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; } 

 <div class="grid-container"> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> <div class="outer-grid"> <div class="outer-square"> <div class="inner-grid"> <div class="inner-square">1</div> </div> <div class="inner-grid"> <div class="inner-square">2</div> </div> <div class="inner-grid"> <div class="inner-square">3</div> </div> <div class="inner-grid"> <div class="inner-square">4</div> </div> <div class="inner-grid"> <div class="inner-square">5</div> </div> <div class="inner-grid"> <div class="inner-square">6</div> </div> <div class="inner-grid"> <div class="inner-square">7</div> </div> <div class="inner-grid"> <div class="inner-square">8</div> </div> <div class="inner-grid"> <div class="inner-square">9</div> </div> </div> </div> </div> 

Answer 4

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;
}