HTML CSS

HOW TO CREATE AN HTML TIMETABLE USING CSS GRID

HTML <DIV> WRAPPER

01

<div id="timetable">   FIRST ROW : PERIOD   <div class="head"></div>   <div class="head">AM</div>   <div class="head">PM</div>

  FOLLOWING ROWS : DAYS   <div class="head">Mon</div>   <div></div><div></div>   <div class="head">Tue</div>   <div></div><div></div>   <div class="head">Wed</div>   <div></div><div></div>

  ENTRIES   <div class="entry" style="grid-column:2/3;    grid-row:2">Walk the Doge.</div>   <div class="entry" style="grid-column:3/4;   grid-row:3">Play with Doge. </div> </div>

CSS GRID LAYOUT

02

#timetable * { box-sizing: border-box; } #timetable {   display: grid;   grid-template-columns: repeat(3, 1fr);  }

CSS GRID CELLS

03

HEADER CELLS .head {   font-weight: bold;  color: white;    background: black;  }

OVERLAY ENTRY CELLS #timetable { position: relative; } .entry {   position: absolute; right: 0; left: 0; top: 0;   background: AliceBlue;  }