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.