Сетка CSS создает новое поле для каждого тега HTML

Question

У меня есть эта 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, а не помещает его в соответствующий блок, как вы можете видеть здесь .

Низкополигональная часть скриншота - это видимая часть, а четыре поля - это поля, которые должны содержать содержимое

Вот шаблон: Нажмите

Answer 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;
}

Answer 2

Проблема в том, что вы применяете height: 100% к каждому отдельному элементу в вашем коде.

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

Это заставляет все элементы брать 100% родительского элемента, а блочные элементы располагаются вертикально.

Тебе не нужно это делать.Это излишне.

Удалите приведенный выше код и просто добавьте:

body {
  margin: 0;
}

.grid {
  height: 100vh;
}