Responsive grid of squares within a responsive grid of squares
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
-
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; }讨论(0) -
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>讨论(0) -
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>讨论(0) -
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; }讨论(0)
加载中...
- 热议问题