StyleSheet1.css

*{
    box-sizing: border-box;
}
body, h1{
    margin: 0;
}
body {
    font-family: monospace;
    line-height: 1.4em;
    color: #afafaf;
}
.container{
    max-width: 1200px;
    height: auto;
    margin: auto;
}
.p2{
    padding: 20px;
}
.header{
    width: 100%;
    height: 60px;
    background-color: #ffffff;
}
.flex{
    display: flex;
    align-items: center;
}
.header > .logo > img {
    width: 100px;
}
.header > .logo {
    width: 30%;
    margin-left: -35px;
    margin-bottom: -55px;
    z-index: 2;
}
.header > .main-nav {
   margin: 20px;
   color: #ffffff;
   text-decoration: none;
   font-size: 1.1em;
}
/*
    Grid
*/
.grid{
    width: 100%;
    height: auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: minmax(220px, auto);
}
.grid-item{
    background-color: #ddd;
}
.grid-item > img{
    width: 100%;
    
}
.grid-item_two{
    grid-column:2/4;
    grid-row:1/3;
    
}
.grid-item_four{
    grid-row: 3/5;
}