how do i align everything on the center via wrapper -css grid - html

Question

I am planning to create this layout:
I am using wrapper as a class and planning to center everything on the screen.
Aside from the wrapper how can I also put some equal sizes for the text and form.
So far here is my css:
.wrapper {
display: grid;
grid-gap: 20px;
border: 1px solid red;
}
.navbar {
display: grid;
}
a#logo {
width: 212px;
height: 41px;
}
.hero {
display: grid;
grid-template-areas: "hero-text hero-video";
}
.hero-text {
grid-area: hero-text;
border: 1px solid green;
}
.hero-form {
grid-area: hero-video;
border: 1px solid green;
}
Any idea how can I achieve the layout below quickly?
You can checkout my codes here: https://jsfiddle.net/f14qxLf5/1/
Feel free to modify it. Sorry newbie here.

Answer 1

Minimal approach through CSS Grid . Moreover you will get useful tutorial here CSS Grid- by Rachel Andrew.
-Thank You
body {
background-color: #fff;
}
.wrapper {
display: grid;
grid-gap: 20px;
border: 1px solid red;
padding: 20px;
}
.navbar {
display: grid;
text-align: center;
width: 100%;
}
a#logo {
display: inline-block;
width: 212px;
height: 41px;
border: 1px solid gray;
color: #000;
font-size: 22px;
text-decoration: none;
}
.hero {
display: grid;
grid-gap: 5px;
grid-template-areas: "hero-text hero-video";
}
.title {
text-align: center;
border: 1px solid gray;
}
.student-list {
display: grid;
grid-template-areas: "student-info student-info student-info";
grid-gap: 5px;
}
.student-info {
text-align: center;
justify-content: center;
border: 1px solid gray;
min-height: 80px;
}
.hero-text {
grid-area: hero-text;
border: 1px solid green;
padding: 20px;
}
.hero-form {
grid-area: hero-video;
border: 1px solid green;
padding: 20px;
}
footer {
border: 1px solid gray;
text-align: center;
}
<div class="wrapper">
<div class="navbar">
LOGO
</div>
<header class="hero">
<div class="hero-text">
<h2> How to create money online </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="hero-form">
<h2> TEXT FORM FOR NOW</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</header>
<div class="title">
<h2>Some Heading</h2>
</div>
<section class="student-list">
<div class="student-info">
<h2>Student Name</h2>
<p>text</p>
</div>
<div class="student-info">
<h2>Student Name</h2>
<p>text</p>
</div>
<div class="student-info">
<h2>Student Name</h2>
<p>text</p>
</div>
</section>
<footer>
<p>footer text</p>
</footer>
</div>