Untitled

<html>
 <head>
<link rel="stylesheet" href="grid-landing-page.css" />
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
  integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
  crossorigin="anonymous"
/>
  </head>

<body>
<div id="grid">
  <div id="landing-page">
    <img id="logo" src="design/bloggologo.png" />
    <div id="heading">Welcome!</div>
    <div id="description">Description</div>
    <div id="form">Form</div>
  </div>
</div>
</body>
</html>

body {
height: 100%;
background-color: black;
color: white;
}

#grid {
height: 100%;
}

#logo {
margin: 10px auto auto 300px;
height: 250px;
width: auto;
}

#heading {
font-size: 2em;
}

#description {
font-size: 1em;
}

@supports (display: grid) {

#grid {
    display: grid;
    grid-template-rows: repeat(2, 3fr) repeat(3, 2fr) repeat(2, 3fr);
    grid-template-columns: repeat(2, 45%);
    grid-column-gap: 10%;
    grid-template-areas: ". ." "lo he" "lo de" "lo fo" "lo fo" "lo fo" ". .";
}

#heading {
    grid-area: he;
}

#description {
    grid-area: de;
}

#form {
    grid-area: fo;
}

#logo {
    grid-area: lo;
}
}