index.css

.container {
    display: grid;
    height: 98vh;
    width: auto;
    grid-template-areas: 
        "top-left-nav . . top-right-nav"
        ". logo logo ."
        ". search-bar search-bar ."
        ". button-search button-lucky ."
        " bot-left-nav . . bot-right-nav";
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr) 30px repeat(2, 1fr);
}

.container,
.top-left-nav,
.top-right-nav,
.logo,
.search-bar,
.button-search,
.button-lucky,
.bot-left-nav,
.bot-right-nav {
    border: 1px solid black;
}

.top-left-nav {
    grid-area: top-left-nav;
    align-self: start;
    justify-self: start;
}

.top-right-nav {
    grid-area: top-right-nav;
    align-self: start;
    justify-self: end;
}

.logo {
    grid-area: logo;
    justify-self: center;
    align-self: end;
}

.search-bar {
    grid-area: search-bar;
    justify-self: center;
}

.search-bar input {
    width: 400px;
    height: 20px;
}

.button-search {
    grid-area: button-search;
    justify-self: right;
}

.button-lucky {
    grid-area: button-lucky;
    justify-self: left;
}

.bot-left-nav {
    grid-area: bot-left-nav;
    align-self: end;
    justify-self: start;
}

.bot-right-nav {
    grid-area: bot-right-nav;
    align-self: end;
    justify-self: end;
}