我正在尝试在一个正方形内创建一个响应式final Dio dio = new Dio();
return dio.post(api, data: data).then((response) {
print(response.data.runtimeType);
print(response.data);
print(response.data['token']);
}
。当我调整页面大小时,网格当前从外部div溢出。如何使网格适合正方形并在与外部div成比例的范围内调整大小?谢谢。
这是一个jsfiddle:https://jsfiddle.net/alexb12/prs5z9cL/
我的代码:
3x3 grid
.wrapper{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 27vw;
height: 27vw;
background-color: #d8c7ff;
border-radius: 10px;
border: 4px;
border-style: solid;
border-color: purple;
padding:1em;
}
.box{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 5%;
column-gap: 5%;
}
.box > div{
border: #333 1px solid;
padding: 1em;
background: red;
width: 6vw;
height: 6vw;
max-width: 100%;
}
答案 0 :(得分:1)
更新如下代码:
.wrapper {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50vmin;
height: 50vmin;
background-color: #d8c7ff;
border-radius: 10px;
border: 4px solid purple;
padding: 1em;
}
.box {
display: grid;
height:100%;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 5%;
}
.box>div {
border: #333 1px solid;
background: red;
display:flex;
justify-content:center;
align-items:center
}
<div class="wrapper">
<div class="box">
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
<div>
hi
</div>
</div>
</div>
答案 1 :(得分:0)
您仅提供具有通用选择器的box-sizing:border-box属性,您的问题将得到解决。
*{
box-sizing:border-box;
}
答案 2 :(得分:0)
只需从选择器.box > div
中删除宽度和高度,问题就会得到解决。您的CSS应该是这样的
.box > div{
border: #333 1px solid;
padding: 1em;
background: red;
max-width: 100%;
}
答案 3 :(得分:0)
我们在这里:https://codepen.io/obliviga/pen/KKMoaBd?editors=1100
我对您的CSS做了一些改动:
.wrapper {
width: 27vw;
height: 27vw;
background: tomato;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 5%;
row-gap: 5%;
position: absolute;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left: 50%;
}
.box {
background-color: gray;
}
如果您对实施有任何疑问,请告诉我。