.coral{
    background-color: coral;
}

.lavender{
    background-color: lavender;
}

.lightgreen{
    background-color: lightgreen;
}

.pink{
    background-color: pink;
}

.yellow{
    background-color: yellow;
}

.plum{
    background-color: plum;
}

#grid > div::before{
    content: attr(class);
}

body{
    display: flex;
    align-items: center;
    height: 100vh;
    justify-content: center;
    margin: 0;
    font-family: sans-serif;
}

#grid{
    aspect-ratio: 4 / 5;
    border: 4px solid #555;
    box-sizing: border-box;
    height: 50vh;
    background-color: #ddd;
    display: grid;
    grid-template-areas: 
        "A A A B" /* 1. sor*/
        "C C D E" /*2. sor*/
        "F . G E" /*3. sor*/
        "F H H E" /*4. sor*/
        "I J J K"; /*5.sor*/
    grid-template-columns: repeat(4, 1fr); /* 4 fele osztja az oszlopokat*/
    grid-template-rows: repeat(5, 1fr);
    gap: 4px;
    padding: 4px;
}

#grid > div{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5em;
    border: 2px solid #555;
}

#lavender{
    grid-area: A;
}

#yellow1{
    grid-area: B;
}

#lightgreen1{
    grid-area: C;
}

#yellow2{
    grid-area: D;
}

#pink{
    grid-area: E;
}

#plum{
    grid-area: F;
}

#yellow3{
    grid-area: G;
}

#lightgreen2{
    grid-area: H;
}

#coral{
    grid-area: I;
}

#lightgreen3{
    grid-area: J;
}

#yellow4{
    grid-area: K;
}