.n {display:none;}
.y {display:run-in; max-width: 50em;}

#gridcontainer {
  display:grid;
  padding: 10px;
  grid-auto-columns: max-content max-content max-content max-content; 
  /* grid-auto-columns: auto auto auto auto; */
}

#gridcontainer  div {
  font-size:smaller;
  text-align: center;
  padding-right:5px;
  padding-top:5px;
}

 /* use the following for two columns */
.x01 { grid-area: 3 / 1 / 3 / 3; border-bottom:solid black 1px;} 
.x02 { grid-area: 5 / 1 / 5 / 3; border-bottom:solid black 1px;} 
.x03 { grid-area: 7 / 1 / 7 / 3; border-bottom:solid black 1px;} 
.x04 { grid-area: 9 / 1 / 9 / 3; border-bottom:solid black 1px;} 
.x05 { grid-area: 11 / 1 / 11 / 3; border-bottom:solid black 1px;} 
.x06 { grid-area: 13 / 1 / 13 / 3; border-bottom:solid black 1px;} 
.x07 { grid-area: 15 / 1 / 15 / 3; border-bottom:solid black 1px;} 
.x08 { grid-area: 17 / 1 / 17 / 3; border-bottom:solid black 1px;} 
.x09 { grid-area: 19 / 1 / 19 / 3; border-bottom:solid black 1px;} 
.x10 { grid-area: 21 / 1 / 21 / 3; border-bottom:solid black 1px;} 
.x11 { grid-area: 23 / 1 / 23 / 3; border-bottom:solid black 1px;} 
.x12 { grid-area: 25 / 1 / 25 / 3; border-bottom:solid black 1px;} 
.x13 { grid-area: 27 / 1 / 27 / 3; border-bottom:solid black 1px;} 
.x14 { grid-area: 29 / 1 / 29 / 3; border-bottom:solid black 1px;} 
.x15 { grid-area: 31 / 1 / 31 / 3; border-bottom:solid black 1px;} 
.x16 { grid-area: 33 / 1 / 33 / 3; border-bottom:solid black 1px;} 
.x17 { grid-area: 35 / 1 / 35 / 3; border-bottom:solid black 1px;} 
.x18 { grid-area: 37 / 1 / 37 / 3; border-bottom:solid black 1px;} 
 /* use the above for two columns */

.a00 { grid-area: 1 / 1 / 2 / 2; border-bottom:solid black 1px;border-right:solid black 1px;margin-right:0.5em;} 
.a01 { grid-area: 2 / 1 / 3 / 2; }
.a02 { grid-area: 4 / 1 / 5 / 2; } 
.a03 { grid-area: 6 / 1 / 7 / 2; } 
.a04 { grid-area: 8 / 1 / 9 / 2; } 
.a05 { grid-area: 10 / 1 / 11 / 2; } 
.a06 { grid-area: 12 / 1 / 13 / 2; } 
.a07 { grid-area: 14 / 1 / 15 / 2; } 
.a08 { grid-area: 16 / 1 / 17 / 2; } 
.a09 { grid-area: 18 / 1 / 19 / 2; } 
.a10 { grid-area: 20 / 1 / 21 / 2; } 
.a11 { grid-area: 22 / 1 / 23 / 2; } 
.a12 { grid-area: 24 / 1 / 25 / 2; } 
.a13 { grid-area: 26 / 1 / 27 / 2; } 
.a14 { grid-area: 28 / 1 / 29 / 2; } 
.a15 { grid-area: 30 / 1 / 31 / 2; } 
.a16 { grid-area: 32 / 1 / 33 / 2; } 
.a17 { grid-area: 34 / 1 / 35 / 2; } 
.a18 { grid-area: 36 / 1 / 37 / 2; } 

.b00 { grid-area: 1 / 2 / 2 / 3; border-bottom:solid black 1px;} 
.b01 { grid-area: 2 / 2 / 3 / 3; }
.b02 { grid-area: 4 / 2 / 5 / 3; } 
.b03 { grid-area: 6 / 2 / 7 / 3; } 
.b04 { grid-area: 8 / 2 / 9 / 3; } 
.b05 { grid-area: 10 / 2 / 11 / 3; } 
.b06 { grid-area: 12 / 2 / 13 / 3; } 
.b07 { grid-area: 14 / 2 / 15 / 3; } 
.b08 { grid-area: 16 / 2 / 17 / 3; } 
.b09 { grid-area: 18 / 2 / 19 / 3; } 
.b10 { grid-area: 20 / 2 / 21 / 3; } 
.b11 { grid-area: 22 / 2 / 23 / 3; } 
.b12 { grid-area: 24 / 2 / 25 / 3; } 
.b13 { grid-area: 26 / 2 / 27 / 3; } 
.b14 { grid-area: 28 / 2 / 29 / 3; } 
.b15 { grid-area: 30 / 2 / 31 / 3; } 
.b16 { grid-area: 32 / 2 / 33 / 3; } 
.b17 { grid-area: 34 / 2 / 35 / 3; } 
.b18 { grid-area: 36 / 2 / 37 / 3; }