CSS-Grid Gantt Chart

css-grid-gantt-chart.markdown

CSS-Grid Gantt Chart

This is a small gantt chart with css-grid.

A Pen by Phil on CodePen.

License.

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>

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;
				}
			}
		}
	}
}