Помогите с вёрсткой блока на HTML + CSS

Question

Учусь вёрстке.

В одном из бесплатных макетов есть такой блок:

Не знаю, как сделать так, чтобы все блоки, а также линии, идущие к ним, были расположены правильно.

Было предположение, что для расположения блоков можно использовать CSS Grid, но разве он подходит для pixel perfect вёрстки?

И как создать эти линии от таймлайна к неделе?

Answer 1

Ждал, что кто-нибудь ответит и ваших попыток...

Двадцать минут и готово! Может что почерпнёте:

body{display:flex;justify-content:center;background-color:#000;background-image:linear-gradient(#222,transparent 1px),linear-gradient(90deg,#222,transparent 1px);background-size:10px 10px;background-position:center;}

.course {
  color: #fff;
  display: grid;
  grid-template: repeat(7, 70px) / repeat(2, 215px);
}
.week {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
  padding: 0 0 0 45px;
  box-shadow: inset 2px 0 0 0 #a383fb, -2px 0 0 0 #a383fb;
}
.week:nth-of-type(2n + 1) {
  padding: 0 45px 0 0;
  text-align: right;
  box-shadow: inset -2px 0 0 0 #a383fb, 2px 0 0 0 #a383fb;
}
.week::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 30px;
  border-bottom: 1px solid #8888;
}
.week:nth-of-type(2n + 1)::before {
  left: auto; right: 0;
}
.week > div:nth-of-type(1) { font: 10px/1em sans-serif; color: #808080; }
.week > div:nth-of-type(2) { font: 13px/1.7em sans-serif; }

<div class="course">
  <div class="week"><div>Неделя №1</div><div>Красивая часть курса, которая помогает в успехе</div></div>
  <div></div><div></div>
  <div class="week"><div>Неделя №2</div><div>Красивая часть курса, которая помогает в успехе</div></div>
  <div class="week"><div>Неделя №3</div><div>Красивая часть курса, которая помогает в успехе</div></div>
  <div></div><div></div>
  <div class="week"><div>Неделя №4</div><div>Красивая часть курса, которая помогает в успехе</div></div>
  <div class="week"><div>Неделя №5</div><div>Красивая часть курса, которая помогает в успехе</div></div>
  <div></div><div></div>
  <div class="week"><div>Неделя №6</div><div>Красивая часть курса, которая помогает в успехе</div></div>
  <div class="week"><div>Неделя №7</div><div>Красивая часть курса, которая помогает в успехе</div></div>
  <div></div>
</div>

БЛОГ НА HUSL

Помогите с вёрсткой блока на HTML + CSS

Ответы (1 шт):