响应式正方形网格内的响应式正方形网格

Question

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

我从这个开始： Grid of responsive squares 并使用了此处列出的 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'>
      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

我觉得你的叠法不对。

你需要一个弹性容器，里面有 9 个弹性子容器，还有 9 个盒子。 浮动框也可以，因为你处理的是方形框 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

这是我的解决方案 :) 不适用于 9x9，但您可以对其进行编辑以满足您的需要，该解决方案包括 bootstrap 响应式外观，https://jsfiddle.net/noLm1r45/16/here 是解决方案。

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

这里有 9 个数独游戏，里面有 9x9 数独网格。

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

我建议另一种方法 - 你可以自己决定它是否适合长期运行:

https://jsfiddle.net/3t17kuzu/3/

示例中元素的宽度为 33.3%。

.sg-3 {
    width: 33.3333%;
    float: left;
    position: relative;
    height: 0;
    padding-top: 33%;
    position: relative;
    outline: 1px solid black;
}

响应式正方形网格内的响应式正方形网格

Responsive grid of squares within a responsive grid of squares

html

javascript

css

flexbox

responsive