learn-css-grid.css

h1 {
    color: rgb(108, 197, 248);
    text-align: center;
}

.grid-model {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: .5em;
    grid-row-gap: .5em;
}

.red,
.orange,
.green,
.yellow,
.violet,
.blue,
.pink,
.navy,
.maroon {
    font-family: sans-serif;
    color: white;
    text-align: center;
    height: 100px;
}

.red {
    background-color: #FF0000;
}

.orange {
    background-color: 	#FF8C00;
   
}

.green {
    background-color: #008000;
   
}

.yellow {
    background-color: #FFFF00;
}

.violet {
    background-color: #8A2BE2;
}
.blue {
    background-color: #0000FF;
}

.pink {
    background-color: #FF69B4;
}

.navy {
    background-color: #00008B;
}

.maroon {
    background-color: #800000;
} 

/*BOX 3 (3.1, 3.2, 3.3, 3.4, 3.5, 3.6)*/
.box-three {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.box-three > div {
    background-color: rgb(190, 238, 171);
}

/*BOX 4 (4.1, 4.2, 4.3) */
.inside-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

/*BOX 9 (9.1, 9.2, 9.3, 9.4)*/
.box-nine {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.box-nine > div {
    background-color: rgb(218, 140, 95);
}

/*For inside borders styles (3.1...4.1...9.1)*/
.inside-box > div,
.box-three > div,
.box-nine > div {
    border: 1px solid #b8b2b2;
    padding: 1px;
    margin: 1px;
    height: 100%;
}

.inside-box > div:nth-child(1) {
    background-color: #8552b4;
    grid-row: 1/2;
    grid-column: 1/2;
}

.inside-box > div:nth-child(2) {
    align-self: center;
    background-color: #cfa0fc;
    grid-row: 2/3;
    grid-column: 2/3;
}

.inside-box > div:nth-child(3) {
    align-self: center;
    background-color: #410a75;
    grid-row: 3/4;
    grid-column: 3/4;
}

footer {
    margin-top: 200px;
}