Мне тоже в начале хотелось больше личного времени, но со временем понимаешь что составить конкуренцию на рынке если ты не какой-то гений тяжело, остаётся тратить больше личного времени чем остальные, что бы хоть как-то вырасти как хороший специалист. Другими словами: если хочешь больше личного времени, нужно будет есть только дошик))
Думаю нужно научиться жить сегодняшним моментом, нужно научиться быстро переключаться между работой и своим миром, я или личным временем. Ну в общем эта тема глубокая и по ней можно долго спорить и строить гипотезы. Забей на всё, выбирай то что тебе нравиться и бомби-бомби и бомби, не задумывайся по таким мелким пустикам))

Я понял как это сделать!

<div class="wrapper">
   <div class="box1">1</div>
   <div class="box2">2</div>
   <div class="box3">3</div>
   <div class="box4">4</div>
   <div class="box5">5</div>
   <div class="box6">6</div>
</div>

.wrapper {
  display: grid;
}
.box1 {
  grid-column: 1;
  grid-row: 1;
}
.box2 {
   grid-column: 1;
   grid-row: 3;
}
.box3 {
   grid-column: 1;
   grid-row: 2;
}
.box4 {
   grid-column: 1;
   grid-row: 4;
}
.box5 {
   grid-column: 1;
   grid-row: 6;
}
.box6 {
   grid-column: 1;
   grid-row: 5;
}

Хороший справочник по событиям!
https://developer.mozilla.org/ru/docs/Web/Events
Для клика https://developer.mozilla.org/en-US/docs/Web/API/E...

Я тоже такой макет делал))) MoGo
Я использовал grid. У меня правда корявенький макет получился, спешил.
Вот мой GitHub, строго не судите, он ещё будет доводится до ума!