Как разделить (визуально) страницу на 4 части: 2 по горизонали, 2 по вертикали?

Для разделения страницы на 4 части: 2 по горизонтали и 2 по вертикали, вы можете использовать CSS свойства grid или flexbox.

Сначала создайте контейнер, в котором будут располагаться ваши четыре части. Например, вы можете использовать следующий HTML код:

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

Теперь добавим стили CSS для деления страницы на четыре части:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100vh;
}
 
.box1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: #f2f2f2;
}
 
.box2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background-color: #d9d9d9;
}
 
.box3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background-color: #c6c6c6;
}
 
.box4 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-color: #b3b3b3;
}

В данном примере мы создали контейнер с помощью grid layout, определили две строки и два столбца с помощью grid-template-columns и grid-template-rows. Затем каждая из четырех частей (box1, box2, box3, box4) занимает определенные ячейки в сетке с помощью grid-column и grid-row.

Таким образом, вы разделили страницу на 4 части: 2 по вертикали и 2 по горизонтали. Надеюсь, это поможет вам решить вашу задачу! Если у вас есть дополнительные вопросы, не стесняйтесь задавать.