响应式正方形网格内的响应式正方形网格
Posted
技术标签:
【中文标题】响应式正方形网格内的响应式正方形网格【英文标题】：Responsive grid of squares within a responsive grid of squares 【发布时间】：2016-09-03 11:41:01 【问题描述】：我正在尝试制作一个响应方块网格，网格中的每个方块都包含另一个响应方块网格。想象一个数独板，它有 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 小提琴： https://jsfiddle.net/emilmr/upozc9a3/
【问题讨论】：
您能否发送一张您正在尝试完成的工作的图片，因为您的示例仅显示了一个方形网格 div，其中包含 9 个方形网格单元 div。 【参考方案1】：我认为你的重叠是不对的。
您需要一个包含 9 个 flex 子项的 flex 容器，其中还包含 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>【讨论】：
这很完美，而且非常简单！谢谢！【参考方案2】：这是我的解决方案 :) 不适用于 9x9，但您可以对其进行编辑以满足您的需求，该解决方案包括用于响应式外观的引导程序，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;
【讨论】：
【参考方案3】：我建议另一种方法 - 从长远来看，您可以自己决定是否方便：
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;
【讨论】：
【参考方案4】：这里有 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>【讨论】：
这个解决方案也很棒！以上是关于响应式正方形网格内的响应式正方形网格的主要内容，如果未能解决你的问题，请参考以下文章