HTML CSS
(a quick guide)
<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>
#timetable * { box-sizing: border-box; } #timetable { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
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; }