Skip to content

Instantly share code, notes, and snippets.

@unwelt

unwelt/css-grid-gantt-chart.markdown

Forked from marksumoto/css-grid-gantt-chart.markdown
Created June 27, 2023 09:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save unwelt/09880d3cd87ad4d4493baab9371a47a6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save unwelt/09880d3cd87ad4d4493baab9371a47a6 to your computer and use it in GitHub Desktop.
Download ZIP
CSS-Grid Gantt Chart
Raw
css-grid-gantt-chart.markdown
Raw
index.html
<div class="wrapper">
<div class="header">
<h2>Gantt Chart Concept with CSS-Grid</h2>
<p>Use <strong>grid-column</strong> to span a new entry across the grid. (e. g. <strong>grid-column: 5/12;</strong> spans an entry from May to November) </p>
</div>
<div class="gantt">
<div class="gantt__row gantt__row--months">
<div class="gantt__row-first"></div>
<span>Jan</span><span>Feb</span><span>Mar</span>
<span>Apr</span><span>May</span><span>Jun</span>
<span>Jul</span><span>Aug</span><span>Sep</span>
<span>Oct</span><span>Nov</span><span>Dec</span>
</div>
<div class="gantt__row gantt__row--lines" data-month="5">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
<span></span><span class="marker"></span><span></span>
<span></span><span></span><span></span>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Barnard Posselt
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 4/11; background-color: #2ecaac;">Even longer project</li>
</ul>
</div>
<div class="gantt__row gantt__row--empty">
<div class="gantt__row-first">
Ryley Huggons
</div>
<ul class="gantt__row-bars"></ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Lanie Erwin
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 2/5; background-color: #2ecaac;">Start Februar 🙌</li>
<li style="grid-column: 1/6; background-color: #ff6252;" class="stripes"></li>
<li style="grid-column: 7/11; background-color: #54c6f9;">Same line</li>
</ul>
</div>
<div class="gantt__row gantt__row--empty">
<div class="gantt__row-first">
Krishnah Pauleit
</div>
<ul class="gantt__row-bars"></ul>
</div>
<div class="gantt__row gantt__row--empty">
<div class="gantt__row-first">
Hobard Lampitt
</div>
<ul class="gantt__row-bars"></ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Virgilio Jeanes
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 2/5; background-color: #2ecaac;"></li>
</ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Ky Verick
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 3/8; background-color: #54c6f9;">Long project</li>
</ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Ketti Waterworth
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 4/9; background-color: #ff6252;" class="stripes">A title</li>
</ul>
</div>
</div>
Raw
style.scss
@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,700");
body,
html {
font-family: "Roboto", sans-serif;
background-color: #cddade;
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.header {
color: #202125;
margin-bottom: 40px;
h2 {
font-weight: 600;
}
p {
font-weight: 300;
}
}
$red: #ff6252;
.wrapper {
max-width: 1200px;
min-width: 700px;
margin: 0 auto;
padding: 40px;
}
.gantt {
display: grid;
border: 0;
border-radius: 12px;
position: relative;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0 75px 125px -57px #7e8f94;
&__row {
display: grid;
grid-template-columns: 150px 1fr;
background-color: #fff;
&:nth-child(odd) {
background-color: #f5f5f5;
.gantt__row-first {
background-color: #f5f5f5;
}
}
&:nth-child(3) {
.gantt__row-bars {
border-top: 0;
}
.gantt__row-first {
border-top: 0;
}
}
&--empty {
background-color: lighten($red, 25%) !important;
z-index: 1;
.gantt__row-first {
border-width: 1px 1px 0 0;
}
}
&--lines {
position: absolute;
height: 100%;
width: 100%;
background-color: transparent;
grid-template-columns: 150px repeat(12, 1fr);
span {
display: block;
border-right: 1px solid rgba(0, 0, 0, 0.1);
&.marker {
background-color: rgba(10, 52, 68, 0.13);
z-index: 2;
}
}
&:after {
grid-row: 1;
grid-column: 0;
background-color: #1688b345;
z-index: 2;
height: 100%;
}
}
&--months {
color: #fff;
background-color: #0a3444 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
grid-template-columns: 150px repeat(12, 1fr);
.gantt__row-first {
border-top: 0 !important;
background-color: #0a3444 !important;
}
span {
text-align: center;
font-size: 13px;
align-self: center;
font-weight: bold;
padding: 20px 0;
}
}
&-first {
background-color: #fff;
border-width: 1px 0 0 0;
border-color: rgba(0, 0, 0, 0.1);
border-style: solid;
padding: 15px 0;
font-size: 13px;
font-weight: bold;
text-align: center;
}
&-bars {
list-style: none;
display: grid;
padding: 9px 0;
margin: 0;
grid-template-columns: repeat(12, 1fr);
grid-gap: 8px 0;
border-top: 1px solid rgba(221, 221, 221, 0.8);
li {
font-weight: 500;
text-align: left;
font-size: 14px;
min-height: 15px;
background-color: #55de84;
padding: 5px 12px;
color: #fff;
overflow: hidden;
position: relative;
cursor: pointer;
border-radius: 20px;
&.stripes {
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.1) 5px, rgba(255,255,255,.1) 12px);
}
&:before,
&:after {
content: "";
height: 100%;
top: 0;
z-index: 4;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
}
&:before {
left: 0;
}
&:after {
right: 0;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment