Question

我正在尝试将这些盒子放在网格中并使其具有响应性，保持相同的高度和最大的盒子。

它按照我想要的方式工作，但当然IE给了我一些问题。

在Chrome中查看它以查看我希望它如何运作（记下每行中的框如何调整到最高框的大小）

然后在IE中查看。我使用的是IE11。

我确定需要一些-ms-标签，我已经尝试过，但可以在IE中正常使用。

非常感谢任何帮助。

setState

Answer 1

我在IE11中获得了我想要的方式，我必须使用grid-column和grid-row明确地放置它们。由于1是这些属性的默认值，我让该值隐式发生。此外，不需要供应商前缀。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;  
  background-color: #fff;
  color: #444;
}

.grid > div {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;  
}

.b {
  grid-column: 2;
}

.c {
  grid-column: 3;
}

.d {
  grid-row: 2;
}

.e {
  grid-column: 2;
  grid-row: 2;
}

.f {
  grid-column: 3;
  grid-row: 2;
}

<div class="grid">
  <div class="a">content</div>
  <div class="b">content goes here content goes here content goes here content goes here content goes here content goes here </div>
  <div class="c"></div>
  <div class="d">content</div>
  <div class="e"></div>
  <div class="f">content goes here content goes here content goes here content goes here content goes here </div>
</div>

CSS等于IE11中的宽度和高度网格框

1 个答案: