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-сети. Как мне изменить свой код, чтобы он работал как положено?

UPD

После изменения класса div на wrapper:

Answer 1

Вам не нужно 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>

Answer 2

Вы назначили класс «столбец» для оболочки, но определили его стиль как .wrapper. Либо переименуйте класс div в оболочку, либо измените имя класса в css с оболочки на столбец.

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

Вот рабочий jsfiddle