index.css

body {
    margin: 0;
    margin: 2vw;
}
::-webkit-scrollbar {
    display: none;
}
/* to display text in center of item box */
.container div {
    color: #ffffff;
    display: grid;
    place-items: center;
    border-radius: 2vw;
    font-family: sans-serif;
    font-size: 20px;
}

/* grid layout */
.container {
    margin: auto;
    width: 60%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 50px 300px 300px 300px 300px 300px 1fr;
    justify-content: center;
    gap: 2vw;
    transition: all .5s ease-in;
}
.item1 {
    grid-column: 1/4;
}
.item2 {
    grid-column: 1/3;
}
.item5 {
    grid-column: 2/4;
}
.item6 {
    grid-column: 1/4;
}
.item7 {
    grid-column: 1/3;
    grid-row: 5/7;
}

/* niche items ko color kiya he bas*/
.item1 {
    background: #0000007a;
}
.item2 {
    background: #ffb700;
}
.item3 {
    background: #44ff30;
}
.item4 {
    background: #ff09f7;
}
.item5 {
    background: #2028ff;
}
.item6 {
    background: #c861ff;
}
.item7 {
    background: #ff1070;
}
.item8 {
    background: #ff4815;
}
.item9 {
    background: #15a9ff;
}