index.css

body{
    font-family: Arial,sans-serif;
    text-justify: center;
    text-align: center;
}

.d1 { background-color:#38023B; color: #fff; }
.d2 { background-color:#A288E3; color: #fff; }
.d3 { background-color: #BBD5ED; color: #fff; }
.d4 { background-color: #CEFDFF; color: #fff; }
.d5 { background-color: #CCFFCB; color: #fff; }
.d6 { background-color: yellow; color: #fff; }
.d7 { background-color: orange; color: #fff; }
.d8 { background-color: cornflowerblue; color: #fff; }
.d9 { background-color: teal; color: #fff; }
.d10 { background-color: olivedrab; color: #fff; }

.container {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 50px 50px;
}

.container2 {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 60% 40%;
}


.container3 {
    margin-bottom: 20px;
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;

    grid-template-columns: 100px 100px 100px;
}


.container4 {
    margin-bottom: 20px;
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 150px 150px;

    /* To create a gap of 10px between rows and 20px between columns */
    grid-gap: 10px 20px;
}

.container5 {
    margin-bottom: 20px;
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 50px 50px;

    /* To create a gap of 20px between columns of grid */
    grid-column-gap: 20px;
    /* To create a gap of 20px between rows of grid */
    grid-row-gap: 20px;
}