具有几列的HTML网格布局，使用浏览器窗口的高度/宽度为100％

Question

I want do divide entire html page to 4 sections I use 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>

using this grid definition I define:

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

But instead of creating 4 vertical sections, 4 horizontals are created and only part of html web is utilized. How should I change my code to work as expected?

UPD

After the change of div class to be wrapper :

Answer 1

You have assigned class "column" to the wrapper but defined it's style as .wrapper. Either rename the class of the div to wrapper or change the class name in css from wrapper to column.

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

Here is a working jsfiddle

Answer 2

You don't need the column div.

Try this:

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