具有幾列的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

您已將“列”類分配給包裝器，但將其樣式定義為.wrapper。 將div的類重命名為包裝器，或者將css中的類名稱從包裝器更改為列。

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

這是一個工作的jsfiddle

Answer 2

您不需要column div。

嘗試這個：

<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='wrapper'>

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