<div class="widget-wrap">
  <div id="bars"></div>
  <h1>PURE CSS GANTT CHART</h1>

  <div class="gantt">
    <!-- (A) FIRST ROW : DAYS -->
    <div class="head">Mon</div> <div class="head">Tue</div>
    <div class="head">Wed</div> <div class="head">Thur</div>
    <div class="head">Fri</div> <div class="head">Sat</div>
    <div class="head">Sun</div>

    <!-- (B) FOLLOWING : TASKS -->
    <div style="background: #ffdddd; grid-row: 2; grid-column: 1 / span 2">
      First
    </div>
    <div style="background: #d6ffd8; grid-row: 3; grid-column: 3 / span 3">
      Second
    </div>
    <div style="background: #cad0ff; grid-row: 4; grid-column: 5 / span 3">
      Third
    </div>
  </div>
  
  <!-- (X) VISIT CODE-BOXX -->
  <div id="code-boxx">
    Visit
    <a href="https://code-boxx.com/responsive-gantt-chart-html-css/" target="_blank">
      Code Boxx
    </a> for more details.
  </div>
</div>
/* (A) GANTT CHART CONTAINER */
.gantt {
  /* (A1) GRID LAYOUT - 7 COLUMNS */
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
 
  /* (A2) "TIMELINE" */
  background: repeating-linear-gradient(
   to right, #f2f2f2, #ddd 2px, #fff 2px, #fff 14.25%
  );
}

/* (B) CELLS */
/* (B1) SHARED CELLS */
.gantt div { padding: 10px; }
 
/* (B2) HEADER CELLS */
.gantt .head {
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: #103a99;
}

/* PAGE & BODY */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center; justify-content: center;
  min-height: 100vh;
  background-image: url(https://images.unsplash.com/photo-1495839760557-d150d64b4469?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NzMzNTM0NA&ixlib=rb-1.2.1&q=85);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-align: center;
}

/* WIDGET */
.widget-wrap {
  width: 600px;
  padding: 30px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
}

/* SVG */
#bars {
  width: 100%; height:120px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 448 512" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

/* FOOTER */
#code-boxx {
  font-weight: 600;
  margin-top: 30px;
}
#code-boxx a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  background: #b90a0a;
  color: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.