Grid Unit

  • fr means fraction

Grid by row and column

main {
    width: 200px;
    height: 200px;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr 9fr
}
.a{ grid-row: 1/2; grid-column: 1/3; }
.b{ grid-row: 2/3; grid-column: 1/2; }
.c{ grid-row: 2/3; grid-column: 2/3; }

image-20200406190658709

Grid by area

main {
    width: 200px;
    height: 200px;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr 9fr;
    grid-template-areas: 
        "a a"
        "b c"
}
.a{ grid-area: a; }
.b{ grid-area: b; }
.c{ grid-area: c; }

image-20200406190658709