Timetable template using CSS Grid
BLUF: Styling is what brings the web to life, and mastering Timetable template using CSS Grid is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: Timetable template using CSS Grid
CSS is all about presentation. Discover how Timetable template using CSS Grid works to transform plain HTML into a premium user experience in the guide below.
In this article, we will understand the Timetable template using CSS Grid.A time table is a Schedule of meeting, schools, colleges and conference etc. A CSS Grid is a powerful tool that allows for two-dimensional layouts to be created on the web. Following are the examples of timetable template using CSS Grid.
Example 1:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of countdown timer using jquery</title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</script>
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);
<style>
body {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #c7c7c7;
}
html {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {
font-weight: 200;
font-size: 20px;
margin: 0;
line-height: 1;
padding: 10;
color: red;
letter-spacing: 1px;
text-align: center;
}
$accent-base: #8eeec0;
$cutty-sark: #546E7A;
$porcelain: #ECEFF1;
$accents: (
pink: adjust-hue($accent-base, -180%),
orange: adjust-hue($accent-base, -120%),
green: adjust-hue($accent-base, -60%),
cyan: $accent-base,
blue: adjust-hue($accent-base, 60%),
purple: adjust-hue($accent-base, 120%),
);
@function make-gradient($color){
@return linear-gradient(135deg, $color, adjust-hue($color, 40%));
}
@mixin make-tiles{
@each $name, $value in $accents{
.accent-#{$name}-gradient{
display: flex;
width: 100%;
height: 100%;
background: make-gradient($value);
transition: .2s ease box-shadow, .2s ease transform;
&:hover{
box-shadow: 0 20px 30px 0 transparentize($value, 0.7);
transform: scale(1.05);
}
}
}
}
html, body{
margin: 0;
font-family: 'Karla';
color: $cutty-sark;
}
*{
box-sizing: border-box;
}
.timetable{
@include make-tiles;
display: grid;
grid-template-areas: ". week"
"time content";
grid-template-columns: 120px;
grid-template-rows: 60px;
width: 100vw;
height: 100vh;
.weekend {
background: lighten($porcelain, 5%);
color: lighten($cutty-sark, 20%);
}
.week-names{
grid-area: week;
display: grid;
grid-template-columns: repeat(7, 1fr);
text-transform: uppercase;
font-size: 12px;
&> div{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
box-shadow: inset 1px 0 0 $porcelain;
}
}
.time-interval{
grid-area: time;
display: grid;
grid-template-rows: repeat(6, 1fr);
font-size: 14px;
&> div{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
box-shadow: inset 0 1px 0 0 $porcelain;
}
}
.content{
grid-area: content;
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(7, 1fr);
&> div{
box-shadow: inset 1px 0 0 $porcelain, inset 0 1px 0 0 $porcelain;
}
}
}
</style>
<body>
<h1> Example </h1>
<h2> Timetable template using CSS Grid </h2>
<div class="timetable">
<div class="week-names">
<div>monday</div>
<div>tuesday</div>
<div>wednesday</div>
<div>thursday</div>
<div>friday</div>
<div class="weekend">saturday</div>
<div class="weekend">sunday</div>
</div>
<div class="time-interval">
<div>10:00 - 12:00</div>
<div>12:00 - 02:00</div>
<div>02:00 - 04:00</div>
<div>04:00 - 06:00</div>
<div>06:00 - 08:00</div>
<div>08:00 - 10:00</div>
</div>
<div class="content">
<div>
<div class="accent-orange-gradient"></div>
</div>
<div></div>
<div></div>
<div></div>
<div>
<div class="accent-green-gradient"></div>
</div>
<div class="weekend"></div>
<div class="weekend"></div>
<div></div>
<div></div>
<div></div>
<div>
<div class="accent-cyan-gradient"></div>
</div>
<div></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div>
<div class="accent-pink-gradient"></div>
</div>
<div></div>
<div>
<div class="accent-purple-gradient"></div>
</div>
<div></div>
<div></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div>
<div class="accent-purple-gradient"></div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="weekend"></div>
<div class="weekend"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class = "weekend"></div>
<div class = "weekend"></div>
</div>
</div>
</body>
</html>
Explanation:
In the previous example, we generated a timetable illustration utilizing CSS Grid.
Output:
Following is the output of this example.
Example 2:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of countdown timer using jquery</title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</script>
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);
<style>
body {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #c7c7c7;
}
html {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {
font-weight: 200;
font-size: 20px;
margin: 0;
line-height: 1;
padding: 10;
color: red;
letter-spacing: 1px;
text-align: center;
}
h2 {
font-weight: 200;
font-size: 20px;
margin: 0;
line-height: 1;
padding: 10;
color: red;
letter-spacing: 1px;
text-align: center;
}
p, h3 {
margin: 0 0 1rem;
}
.track-slot {
display: none;
}
@supports( display:grid ) {
@media screen and (min-width:700px) {
.track-slot {
grid-row: rooms;
display: block;
position: sticky;
top: 0;
z-index: 1000;
background-color: rgba(255,255,255,.9);
}
}}
.grid {
@media screen and (min-width:700px) {
display: grid;
grid-gap: 1rem;
grid-template-rows:
[rooms] auto
[time-0800] 1fr
[time-0830] 1fr
[time-0900] 1fr
[time-0930] 1fr
[time-1000] 1fr
[time-1030] 1fr
[time-1100] 1fr
[time-1130] 1fr
[time-1200] 1fr;
grid-template-columns:
[times] 4em
[room-1] 1fr
[room-2] 1fr
[room-3] 1fr
[end];
}
}
.session, .time-slot {
}
.session {
background-color: rgba(0,0,0,0.1);
padding: 1rem;
}
.room-1 {
background-color: rgba(0,0,0,0.1);
}
.room-2 {
background-color: rgba(0,0,0,0.2);
}
.room-3 {
background-color: rgba(0,0,0,0.3);
}
</style>
<body>
<h1> Example </h1>
<h2> Timetable template using CSS Grid </h2>
<div class="schedule grid">
<span class="track-slot" aria-hidden="true" style="grid-column: room-1;"> Slot 1</span>
<span class="track-slot" aria-hidden="true" style="grid-column: room-2;">Slot 2</span>
<span class="track-slot" aria-hidden="true" style="grid-column: room-3;">Slot 3</span>
<h3 class="time-slot" style="grid-column: times; grid-row: time-0800;">10:00am</h3>
<div class="session session-1 room-1" style="grid-column: room-1; grid-row: time-0800 / time-0900;">
<p class="session-title">Session Title</p>
<span class="session-time">10:00am - 12:00pm</span>
<span class="session-track">Slot 1</span>
</div>
<div class="session session-2 room-2" style="grid-column: room-2; grid-row: time-0800 / time-0830;">
<p class="session-title">Session Title</p>
<span class="session-time">12:00pm - 12:30pm</span>
<span class="session-track">Slot 2</span>
</div>
<div class="session session-3 room-3" style="grid-column: room-3; grid-row: time-0800 / time-0830;">
<p class="session-title">Session Title</p>
<span class="session-time">12:00pm - 03:30pm</span>
<span class="session-track">Slot 3</span>
</div>
<h3 class="time-slot" style="grid-column: times; grid-row: time-0830;">8:30am</h3>
<div class="session session-4 room-2" style="grid-column: room-2; grid-row: time-0830 / time-1030;">
<p class="session-title">Session Title</p>
<span class="session-time">8:30am - 10:30am</span>
<span class="session-track">Room 2</span>
</div>
<div class="session session-5" style="grid-column: room-1 / end; grid-row: time-1030 / time-1030;">
</div>
</div>
</body>
</html>
Explanation:
In the previous example, we generated a sample timetable using CSS Grid.
Output:
Following is the output of this example.
Example 3:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of countdown timer using jquery</title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</script>
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);
<style>
body {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #c7c7c7;
}
html {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {
font-weight: 200;
font-size: 20px;
margin: 0;
line-height: 1;
padding: 10;
color: red;
letter-spacing: 1px;
text-align: center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 1rem;
font-family: 'Poppins', sans-serif;
}
p, ul li {
padding-top: 2px;
font-size: .9rem;
}
h1 {
font-size: 2rem;
padding-bottom: 1rem;
}
.grid-container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-rows: repeat(auto-fit, minmax(5rem, 10rem));
}
.day-grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-columns: subgrid;
grid-column-start: 1;
grid-column-end: 8;
grid-row-start: 1;
grid-row-end: 6;
padding: 1rem;
background-color: #e0e5ff;
}
article {
display: grid;
grid-template-columns: 2.5rem 1.5rem 1fr;
grid-template-rows: repeat(12, minmax(2rem, 1fr));
}
.day-grid-hour {
display: grid;
grid-template-columns: 2.5rem 1.5rem 1fr;
grid-template-columns: subgrid;
grid-column: 1 / 4;
border-bottom: 1px dotted black;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: white;
}
.weekend {
grid-row: 2 / span 3;
grid-column: span 3;
display: flex;
flex-direction: column;
}
.eight-am {
grid-row: 2 / 3;
border-top: 1px dotted black;
}
.nine-am {
grid-row: 3 / 4;
}
.ten-am {
grid-row: 4 / 5;
}
.eleven-am {
grid-row: 5 / 6;
}
.twelve-am {
grid-row: 6 / 7;
}
.thirteen-pm {
grid-row: 7 / 8;
}
.fourteen-pm {
grid-row: 8 / 9;
}
.fifteen-pm {
grid-row: 9 / 10;
}
.sixteen-pm {
grid-row: 10 / 11;
}
.seventeen-pm {
grid-row: 11 / 12;
}
.eighteen-pm {
grid-row: 12 / 13;
}
.activity {
grid-column: 3 / 4;
padding-left: .1rem;
}
.meeting-free,
.meeting-block
{
grid-column: 2 / 3;
}
.meeting-free {
background-color: rgb(199, 199, 199);
}
.meeting-block {
background: repeating-linear-gradient(
45deg,
#989fc9,
#989fc9 4px,
#6d6db3 4px,
#6d6db3 6px
);
}
@media (max-width: 34rem) {
.day-grid { grid-row-end: 16; }
}
h2 {
font-weight: 200;
font-size: 20px;
margin: 0;
line-height: 1;
padding: 10;
color: red;
letter-spacing: 1px;
text-align: center;
}
</style>
<body>
<h1> Example </h1>
<h2> Timetable template using CSS Grid </h2>
<main class="grid-container">
<section class="day-grid">
<article>
<h2>Monday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-block"></p>
<p class="activity">Weekly Design Sync</p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-block"></p>
<p class="activity">CSS Grid Practice</p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-block"></p>
<p class="activity">Write talk</p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-block"></p>
<p class="activity">Barre Class</p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-block"></p>
<p class="activity">Dinner</p>
</div>
</article>
<article>
<h2>Tuesday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-block"></p>
<p class="activity">1:1</p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-block"></p>
<p class="activity">Weekly Team Sync</p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-block"></p>
<p class="activity">Write talk</p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-block"></p>
<p class="activity">Barre Class</p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
</article>
<article>
<h2>Wednesday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-block"></p>
<p class="activity">Mentorship Session</p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-block"></p>
<p class="activity">Write Talk</p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-block"></p>
<p class="activity">Barre Class</p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
</article>
<article>
<h2>Thursday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-block"></p>
<p class="activity">Coffee & Code</p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-block"></p>
<p class="activity">Write Talk</p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-block"></p>
<p class="activity">Barre Class</p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
</article>
<article>
<h2>Friday</h2>
<div class="eight-am day-grid-hour">
<p class="time">8:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="nine-am day-grid-hour">
<p class="time">9:00</p>
<p class="meeting-block"></p>
<p class="activity">Sprint Retrospective</p>
</div>
<div class="ten-am day-grid-hour">
<p class="time">10:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eleven-am day-grid-hour">
<p class="time">11:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="twelve-am day-grid-hour">
<p class="time">12:00</p>
<p class="meeting-block"></p>
<p class="activity">Lunch</p>
</div>
<div class="thirteen-pm day-grid-hour">
<p class="time">13:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fourteen-pm day-grid-hour">
<p class="time">14:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="fifteen-pm day-grid-hour">
<p class="time">15:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="sixteen-pm day-grid-hour">
<p class="time">16:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="seventeen-pm day-grid-hour">
<p class="time">17:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
<div class="eighteen-pm day-grid-hour">
<p class="time">18:00</p>
<p class="meeting-free"></p>
<p class="activity"></p>
</div>
</article>
</section>
</main>
<p>Sample based on CSS Grid Bullet Journal by <a href="https://stephaniestimac.com/">Stephanie Stimac</a>.</p>
</body>
</html>
Explanation:
In the aforementioned instance, we generated a sample timetable utilizing CSS Grid.
Output:
Following is the output of this example.
Example 4:
Example
<! DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type"
content = "text/html; charset=UTF-8" />
<title> Example of countdown timer using jquery</title>
<meta name = "description"/>
<meta content = "width=800, initial-scale=1"
name = "viewport" />
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</script>
<script src =
"https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);
<style>
body {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #c7c7c7;
}
html {
margin: 0 auto;
width: 100%;
height: 100%;
background-color: #c7c7c7;
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23404040' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
h1 {
font-weight: 200;
font-size: 20px;
margin: 0;
line-height: 1;
padding: 10;
color: red;
letter-spacing: 1px;
text-align: center;
}
$title-height: 3em;
$days-height: 3em;
$time-width: 3em;
$time-height: 3em;
$grid-color: #dadce0;
$calendar-template: $time-width 10px repeat(7, 1fr);
$current-time-color: #ea4335;
* {
box-sizing: border-box;
}
body {
background: #fff;
}
.container {
width: 100%;
display: grid;
grid-template-rows: $title-height $days-height auto;
position: absolute;
}
.title {
background: #217346;
text-align: center;
display: grid;
place-content: center;
color: #fff;
position: sticky;
top: 0;
z-index: 10;
}
.days {
background: #f3f2f1;
display: grid;
place-content: center;
text-align: center;
grid-template-columns: $calendar-template;
position: sticky;
top: $title-height;
z-index: 10;
border-bottom: 2px solid $grid-color;
}
.day {
border-left: 1px solid $grid-color;
}
.content {
display: grid;
grid-template-columns: $calendar-template;
grid-template-rows: repeat(24, $time-height);
}
.time {
grid-column: 1;
text-align: right;
align-self: end;
font-size: 80%;
position: relative;
bottom: -1ex;
color: #70757a;
padding-right: 2px;
}
.col {
border-right: 1px solid $grid-color;
grid-row: 1 / span 24;
grid-column: span 1;
}
.filler-col {
grid-row: 1 / -1;
grid-column: 2;
border-right: 1px solid $grid-color;
}
.row {
grid-column: 2 / -1;
border-bottom: 1px solid $grid-color;
}
.event {
border-radius: 5px;
padding: 5px;
margin-right: 10px;
font-weight: bold;
font-size: 80%;
}
.weekend {
background-color: #f1f3f4;
}
.calendar1 {
background-color: #d7dbef;
border-color: #bcc3e5;
}
.calendar2 {
background-color: #b3e1f7;
border-color: #81cdf2;
}
.event1 {
grid-column: 3;
grid-row: 9 / span 4;
}
.event2 {
grid-column: 5;
grid-row: 10 / span 6;
}
.event3 {
grid-column: 7;
grid-row: 8 / span 10;
}
.event4 {
grid-column: 8;
grid-row: 21 / span 2;
}
.current-time {
grid-column: 7;
grid-row: 10;
border-top: 2px solid $current-time-color;
position: relative;
top: calc(50% - 1px);
}
.circle {
width: 12px;
height: 12px;
border: 1px solid $current-time-color;
border-radius: 50%;
background: $current-time-color;
position: relative;
top: -6px;
left: -6px;
}
.current {
font-weight: bold;
}
</style>
<body>
<div class="container">
<h1> Example </h1>
<div class="title">Timetable template using CSS Grid </div>
<div class="days">
<div class="filler"></div>
<div class="filler"></div>
<div class="day">Mon 4</div>
<div class="day">Tue 5</div>
<div class="day">Wed 6</div>
<div class="day">Thu 7</div>
<div class="day current">Fri 8</div>
<div class="day">Sat 9</div>
<div class="day">Sun 10</div>
</div>
<div class="content">
<div class="time" style="grid-row:1">01:00</div>
<div class="time" style="grid-row:2">02:00</div>
<div class="time" style="grid-row:3">03:00</div>
<div class="time" style="grid-row:4">04:00</div>
<div class="time" style="grid-row:5">05:00</div>
<div class="time" style="grid-row:6">06:00</div>
<div class="time" style="grid-row:7">07:00</div>
<div class="time" style="grid-row:8">08:00</div>
<div class="time" style="grid-row:9">09:00</div>
<div class="time" style="grid-row:10">10:00</div>
<div class="time" style="grid-row:11">11:00</div>
<div class="time" style="grid-row:12">12:00</div>
<div class="time" style="grid-row:13">13:00</div>
<div class="time" style="grid-row:14">14:00</div>
<div class="time" style="grid-row:15">15:00</div>
<div class="time" style="grid-row:16">16:00</div>
<div class="time" style="grid-row:17">17:00</div>
<div class="time" style="grid-row:18">18:00</div>
<div class="time" style="grid-row:19">19:00</div>
<div class="time" style="grid-row:20">20:00</div>
<div class="time" style="grid-row:21">21:00</div>
<div class="time" style="grid-row:22">22:00</div>
<div class="time" style="grid-row:23">23:00</div>
<div class="filler-col"></div>
<div class="col" style="grid-column:3"></div>
<div class="col" style="grid-column:4"></div>
<div class="col" style="grid-column:5"></div>
<div class="col" style="grid-column:6"></div>
<div class="col" style="grid-column:7"></div>
<div class="col weekend" style="grid-column:8"></div>
<div class="col weekend" style="grid-column:9"></div>
<div class="row" style="grid-row:1"></div>
<div class="row" style="grid-row:2"></div>
<div class="row" style="grid-row:3"></div>
<div class="row" style="grid-row:4"></div>
<div class="row" style="grid-row:5"></div>
<div class="row" style="grid-row:6"></div>
<div class="row" style="grid-row:7"></div>
<div class="row" style="grid-row:8"></div>
<div class="row" style="grid-row:9"></div>
<div class="row" style="grid-row:10"></div>
<div class="row" style="grid-row:11"></div>
<div class="row" style="grid-row:12"></div>
<div class="row" style="grid-row:13"></div>
<div class="row" style="grid-row:14"></div>
<div class="row" style="grid-row:15"></div>
<div class="row" style="grid-row:16"></div>
<div class="row" style="grid-row:17"></div>
<div class="row" style="grid-row:18"></div>
<div class="row" style="grid-row:19"></div>
<div class="row" style="grid-row:20"></div>
<div class="row" style="grid-row:21"></div>
<div class="row" style="grid-row:22"></div>
<div class="row" style="grid-row:23"></div>
<div class="event event1 calendar1">Event 1</div>
<div class="event event2 calendar2">Event 2</div>
<div class="event event3 calendar2">Event 3</div>
<div class="event event4 calendar1">Event 4</div>
<div class="current-time">
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
Explanation:
In the previous instance, we generated a timetable example utilizing CSS Grid.
Output:
Following is the output of this example.
