响应正方形网格中的响应正方形网格
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'>
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/
我认为你的叠瓦是不对的。
你需要一个有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>这是我的解决方案：）不适用于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;
}
我建议另一种方法-你可以自己决定从长远来看是否方便：
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;
}
这里有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>相关文章：
- 响应正方形网格中的响应正方形网格
- 网格状、多响应图像
- 如何在剑道网格中显示JSON响应
- 如何使ExtJS网格响应
- 使用getJSON填充动画响应图像网格
- 响应式数据网格
- 始终将响应式/流体网格内容包含在视口大小内
- 响应式网格布局框架
- .Net 响应式网格视图
- 带有链接的响应式照片网格
- 如何洗牌/随机化引导响应网格
- 对于这个 Kendo-UI 数据源和 Kendo-UI 网格，我的 JSON 响应应该是什么样子的
- 画廊网格滑块响应式等高框
- 任何关于响应网格的建议，该网格将适应不同浏览器的文本大小和布局
- 如何在响应式网站中正确布局网格项目
- 将数据从Form Panel响应加载到网格中
- 在响应网格中动态调整图像大小
- 响应网格破坏了我的js元素
- 瓷砖均匀分布的响应网格-是否可以使用纯css
- 只有一行的响应网格
