CSS 网格为每个 html 标签创建一个新框答案

【问题标题】：CSS grid creates a new box for each html tagCSS 网格为每个 html 标签创建一个新框
【发布时间】：2019-08-14 21:52:27
【问题描述】：

我的网站有这个 CSS 部分：

*{
    height: 100%;
    width: 100%;
    margin: 0;

}
.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.grid div:nth-child(odd){
    border: black 2px solid;
}

.grid div:nth-child(even){
    border: black 2px solid;
}

我想要四个盒子，但它只是为每个 HTML 标签创建一个新盒子，而不是把它放在相应的盒子里，你可以看到here。

截图的低多边形部分是可见部分，四个框是应该包含内容的框

这是模板：Click

【问题讨论】：

您能澄清一下问题所在吗？你想达到什么/预期的结果是什么，它与目前的情况有什么不同？
@jensmtg 目前看起来每个 html 标签都有一个新的网格框，即使它们都在同一个 div 中。我想有四个 div/boxes 内容在相应的框中，而不是在整个网站或其他东西下。

标签： html css vue.js css-grid

【解决方案1】：

将高度和宽度规范放在网格本身上，它应该表现得更符合预期。

* {
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
  width: 100vw;
}

.grid div:nth-child(odd) {
  border: black 2px solid;
}

.grid div:nth-child(even) {
  border: black 2px solid;
}

【讨论】：

【解决方案2】：

问题是您将height: 100% 应用于代码中的每个元素。

* {
   height: 100%;
   width: 100%;
   margin: 0;
}

这会强制所有元素占据父元素的 100%，并且块元素垂直堆叠。

您不需要这样做。太过分了。

删除上面的代码并添加：

body {
  margin: 0;
}

.grid {
  height: 100vh;
}

【讨论】：