*{
    overflow: hidden;
}

.okvir{
    width: 100vw;
    height: 100vh;
    top: 6vh;
    font-size: 5vh;
}

.grid {
    left: 0;
    display: grid;
    grid-template-columns: 1fr 50vw 50vw 1fr;
    /* Pove da so 4 okvirji v vrst uporabiš lahko tudi px, %, auto ... */
    grid-template-rows: 1fr 1fr 1fr 1fr;
    /* prvi fr je za title, drugi za header, tretji za sidebar ... */
    grid-template-areas:
        ". title title ."
        /* Prva in zadnja pika pove da je še eno okvir. pove da je čez dve koloni */
        ". header header ."
        /* -||- pove da je v prvi koloni za njim pa je prazen prostor */
        ". sidebar content ."
        /* -||- pove da sta eden poleg drugega v koloni */
        ". footer footer .";
        /* -||- pove da je sidebar čez dve vrsti footer pa poleg njega */
        text-align: center;
        width: 99.85vw;
        height: 88vh;
        border-style: solid;
}

.title {
    grid-area: title;
    /* display: grid; // gnezdi grid znotraj title */
    /* justify-self: center; // Pokrije samo površino ki jo zasede vsebina okvirja uporabiš lahko še start in end */
    /* align-self: center // -||- */ 
    /* grid-column-end: span 2; // Pikaz čez cel ekran po dolžini */
    /* grid-row-end: span 2; // Prikaz čez dve vrstici */
    border-style: solid;
}

.header {
    grid-area: header;
    border-style: solid;
}

.sidebar {
    grid-area: sidebar;
    border-style: solid;
}

.content {
    grid-area: content;
    border-style: solid;
}

.footer {
    grid-area: footer;
    border-style: solid;
}

.grid div:nth-child(0) {
    background-color: white;
}

.grid div:nth-child(1) {
    background-color: yellow;
}

.grid div:nth-child(2) {
    background-color: pink;
}

.grid div:nth-child(3) {
    background-color: gray;
}

.grid div:nth-child(4) {
    background-color: lightgreen;
}

.grid div:nth-child(5) {
    background-color: lightskyblue;
}