css - 具有多个列的 HTML 网格布局使用浏览器窗口的 100% 高度/宽度

Question

我想把整个 html 页面分成 4 个部分 我使用 CSS:

 <style>
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1  ;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 ;
  grid-row: 1 ;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-column: 3;
  grid-row: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 4;
  grid-row: 1;
}
}
</style>

使用我定义的这个网格定义:

<div class="column">
  <div class="one" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="two" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="three" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="four" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

但不是创建 4 个垂直部分，而是创建 4 个水平部分，并且只使用了 html web 的一部分。 我应该如何更改我的代码才能按预期工作？

UPD

将 div 类更改为 wrapper 后:

Answer 1

您已将类“column”分配给包装器，但将其样式定义为 .wrapper。 要么将 div 的类重命名为 wrapper，要么将 css 中的类名从 wrapper 更改为 column。

<div class="wrapper">...</div>

这是一个有效的 jsfiddle