Grilla Horaria CSS

by Alejandro Hernández

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="mod header">
        Lunes
      </div>
      <div class="mod mod-80 clase">
        Tec. de la Información
      </div>
      <div class="mod mod-10 recreo">
        Recreo
      </div>
      <div class="mod mod-80 clase">
        Literature
      </div>
      <div class="mod mod-15 vacio">
        
      </div>
      <div class="mod mod-80 clase">
        L. Adicional (Inglés)
      </div>
      <div class="mod mod-40 clase">
        Literature
      </div>
      <div class="mod mod-30 clase">
        Fisico-Química
      </div>
      <div class="mod mod-40 vacio">
        
      </div>
      <div class="mod mod-40 clase">
        I.S.C.H (history)  
      </div>
      <div class="mod mod-15 recreo">
        Recreo
      </div>
      <div class="mod mod-40 clase">
        Drama
      </div>
      <div class="mod mod-40 clase">
        Français
      </div>
    </div>
    <div class="col">
      <div class="mod header">
        Martes
      </div>
      <div class="mod mod-80 clase">
        Tec. de la Información
      </div>
      <div class="mod mod-10 recreo">
        Recreo
      </div>
      <div class="mod mod-40 clase">
        Literature
      </div>
      <div class="mod mod-80 clase">
        L. Adicional (Inglés)
      </div>
      <div class="mod mod-80 clase">
        Literature
      </div>
      <div class="mod mod-30 clase">
        Fisico-Química
      </div>
      <div class="mod mod-80 clase">
        Geografía
      </div>
      <div class="mod mod-40 clase">
        I.S.C.H (history)  
      </div>
      <div class="mod mod-15 recreo">
        Recreo
      </div>
      <div class="mod mod-40 clase">
        Drama
      </div>
      <div class="mod mod-40 clase">
        Français
      </div>
    </div>
    <div class="col">
      1 of 2
    </div>
   ...

CSS

.container {
  border: 3px solid #666;
  margin: 5px;
  padding: 15px;
  border-radius: 5px;
}

.col {
  padding: 0;/* 15px 0 15px;*/
  height: 1133px;
  
}

.mod-15 {  height: 20px;}
.mod-15 {  height: 30px;}
.mod-30 {  height: 60px;}
.mod-40 {  height: 80px;}
.mod-80 {  height: 160px;}

.mod {
  margin: 5px;
  padding: 3px;
  border-radius: 3px;
}

.header {
  background: #B40601;
  color: whitesmoke;
  text-align: center;
}

.mod.clase {border: 2px solid #D4211C;  background: #FFD8D7;  }
/*.mod.clase:nth-child(even) { background: #FFD8D7; }
.mod.clase:nth-child(odd) { background: #FFC0BE; }*/
.mod.recreo {
  background: #C5DEDF;
  border: 2px solid #17888D;
  text-align: Center;
}

.mod.vacio {
  background: #FDE4F1;
  border: 4px dashed #BD1E75;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */