响应式网格中的正方形响应网格 [英] Responsive grid of squares within a responsive grid of squares

问题描述

我正在尝试制作一个响应方格网格，网格中的每个方格都包含另一个响应方格网格。想象一个有9个方块，每个包含9个方块的数独板。

我从这开始：
响应方格的网格
，并使用了flexbox答案，这是布局在这里：
https://jsfiddle.net/patrickberkeley/noLm1r45/3/

我原本以为如果我只是在第一个里面放置另一个响应式的正方形网格就行了。但内容div只是0px，你什么都看不到。我已经尝试了clearfix，但得到了相同的结果。几个小时后，我无处可去。我错过了什么？是否有JS解决方案更好？

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'> 
有些内容
< / div> 
< / div> 
< div class ='square-grid__cell square-grid__cell  -  3'> 
< div class ='square-grid__content'> 
有些内容
< / div> 
< / div> 
< div class ='square-grid__cell square-grid__cell  -  3'> 
< div class ='square-grid__content'> 
有些内容
< / div> 
< / div> 
< div class ='square-grid__cell square-grid__cell  -  3'> 
< div class ='square-grid__content'> 
有些内容
< / div> 
< / div> 
< div class ='square-grid__cell square-grid__cell  -  3'> 
< div class ='square-grid__content'> 
有些内容
< / div> 
< / div> 
< div class ='square-grid__cell square-grid__cell  -  3'> 
< div class ='square-grid__content'> 
有些内容
< / div> 
< / div> 
< div class ='square-grid__cell square-grid__cell  -  3'> 
< div class ='square-grid__content'> 
有些内容
< / div> 
< / div> 
< div class ='square-grid__cell square-grid__cell  -  3'> 
< div class ='square-grid__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％; 
} 
 
 //尺寸 - 每行的单元格数量
 
 .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％; 
 
 
 
 
 $ b 
  JS小提琴：
  https://jsfiddle.net/emilmr/upozc9a3/   
    DEMO    / a>   
 
 
 
 
      flex-wrap：wrap;}。flex，.flex> div {border：solid 1px;宽度：33.33％; text-align：center;}。flex> div：before {display：inline-block;填充顶部：100％;内容：''; vertical-align：middle;} body {width：50％; min-width：450px;保证金：汽车; font-size：calc（0.5vw + 10px）; / *在这里保存3个字母，你可以增加一个数字的vw值* /} / *在这里调整大小或让窗口做* / 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>  

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/

解决方案

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>

这篇关于响应式网格中的正方形响应网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！