CSS Grids: Calendar, Chess Board, and Holy Grail

CSS for Calendar 7×6 grid

.calgrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(50px, 150px));
    grid-template-rows: repeat(6, 100px);
    justify-content: center;
}

.calgrid div {
    border: 1px solid blue;
}

April 2019

Sun
M
T
W
Th
F
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

CSS for Chess or Checker Board 8×8 grid

.chessboard {
    display: grid;
    grid-template-columns: repeat(9,50px);
    grid-template-rows: repeat(8, 50px);
    justify-content: center;
    margin-left: 50px;
    margin-bottom: 100px;
}
.chessboard div {
    border: 1px solid black;
}
.chessboard div:nth-child(odd) {
    background-color: brown;
}
.chessboard div:nth-child(9n+0) {
    background-color: transparent;
    border: none;
}

CSS for Holy Grail Layout: Header, LeftSide, Content, RightSide, and Footer

.holygrail {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 300px 150px 150px 60px;
    grid-template-areas: "header" "content" "leftside" "rightside" "footer";
    margin: 1rem 1rem 8rem 1rem;
    padding: 1rem;
    border: 5px solid gray;
}
.holygrail div {
    border: 2px solid green;
}
#header {
    grid-area: header;
    background-color: lightblue;
}
#leftside {
    grid-area: leftside;
    background-color: lightgray;
}
#content {
    grid-area: content;
}
#rightside {
    grid-area: rightside;
    background-color: lightgray;
}
#footer {
    grid-area: footer;
    background-color: lightblue;
}

@media screen and (min-width: 900px) {
    .holygrail {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 60px 300px 60px;
        grid-template-areas:
            "header header header header"
            "leftside content content rightside"
            "footer footer footer footer";
    }
}
leftside
content
rightside