Building a Responsive Timeline with Just HTML and CSS

What Is This?

This is a code sample for creating a simple timeline style using only HTML and CSS.

It should come in handy when you need to implement something in pure HTML and CSS, such as on Color Me Shop or a restricted WordPress setup.

It's also mobile-responsive, so feel free to use it.

The Code

Implementing the code below produces something that looks like this.
It's a minimal style, so feel free to tweak it as you like.

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>timeline</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="container">
    <!-- item box LEFT ここを繰り返す -->
    <div class="timeline__container">
      <div class="timeline__textBox">
        <div class="timeline__textBox__text left">
          text
        </div>
      </div>
      <div class="timeline__line">
        <div class="timeline__dot"></div>
      </div>
      <div class="timeline__date">
        2024
      </div>
    </div>
    <!-- item box 終わり -->

    <!-- item box RIGHT ここを繰り返す -->
    <div class="timeline__container">

      <div class="timeline__date left">
        2024
      </div>

      <div class="timeline__line">
        <div class="timeline__dot"></div>
      </div>

      <div class="timeline__textBox">
        <div class="timeline__textBox__text right">
          text
        </div>
      </div>
    </div>
    <!-- item box 終わり -->

    <!-- item box  LEFT ここを繰り返す -->
    <div class="timeline__container">
      <div class="timeline__textBox">
        <div class="timeline__textBox__text left">
          text
        </div>
      </div>
      <div class="timeline__line">
        <div class="timeline__dot"></div>
      </div>
      <div class="timeline__date">
        2024
      </div>
    </div>
    <!-- item box 終わり -->

    <!-- item box LEFT ここを繰り返す -->
    <div class="timeline__container">
      <div class="timeline__textBox">
        <div class="timeline__textBox__text left">
          text
        </div>
      </div>
      <div class="timeline__line">
        <div class="timeline__dot"></div>
      </div>
      <div class="timeline__date">
        2024
      </div>
    </div>
    <!-- item box 終わり -->
  </div>
</body>
</html>

.timeline__container {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  grid-template-rows: 1fr;
}

.timeline__textBox {
}

.left {
  margin-left: auto;
}

.right {
  margin-right: auto;
}

.timeline__textBox__text {
  background-color: rgb(224, 231, 233);
  max-width: 370px;
  padding: 32px;
  border-radius: 16px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.timeline__line {
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.timeline__line::after {
  content: '';
  background-color: rgb(72, 176, 255);
  width: 4px;
  height: 100%;
}

.timeline__dot {
  width: 16px;
  height: 16px;
  background-color: rgb(72, 176, 255);
  border-radius: 999px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.timeline__date {
  display: flex;
  align-items: center;
  color: gray;
  font-style: italic;
}

/* スマホ版のスタイル */
@media (max-width: 768px) {
  .timeline__container {
    grid-template-columns: 100px 70px 1fr;
  }

  .timeline__textBox {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .timeline__date {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .timeline__line {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .left, .right {
    margin-left: 0;
    margin-right: 0;
  }
}