Question

我正在尝试在一个正方形内创建一个响应式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%;
}

Answer 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>

Answer 2

您仅提供具有通用选择器的box-sizing：border-box属性，您的问题将得到解决。

*{
box-sizing:border-box;
}

Answer 3

只需从选择器.box > div中删除宽度和高度，问题就会得到解决。您的CSS应该是这样的

.box > div{
  border: #333 1px solid;
  padding: 1em;
  background: red;
  max-width: 100%;
}

Answer 4

我们在这里：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;
}

如果您对实施有任何疑问，请告诉我。

内部div从外部div溢出

4 个答案: