Html 如何通过wrapper-css网格对齐中心上的所有内容

我计划创建此布局：

我正在使用包装器作为一个类，并计划将所有内容集中在屏幕上

除了包装外，我还可以为文本和表单设置一些相同的大小

到目前为止，这里是我的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;
}

你知道我如何快速完成下面的布局吗？ 您可以在此处签出我的代码：

---

请随意修改它。抱歉，这里是新手。

通过CSS网格的最小方法。此外，你会在这里得到有用的教程-由雷切尔·安德鲁

-多谢各位

正文{
背景色：#fff；
}
.包装纸{
显示：网格；
栅隙：20px；
边框：1px纯红；
填充：20px；
}
navbar先生{
显示：网格；
文本对齐：居中；
宽度：100%；
}
a#标志{
显示：内联块；
宽度：212px；
高度：41px；
边框：1px纯色灰色；
颜色：#000；
字体大小：22px；
文字装饰：无；
}
.英雄{
显示：网格；
网格间距：5px；
网格模板区域：“英雄文本英雄视频”；
}
.头衔{
文本对齐：居中；
边框：1px纯色灰色；
}
.学生名单{
显示：网格；
网格模板区域：“学生信息”“学生信息”“学生信息”；
网格间距：5px；
}
.学生信息{
文本对齐：居中；
证明内容：中心；
边框：1px纯色灰色；
最小高度：80px；
}
.英雄文本{
网格区域：英雄文本；
边框：1px纯绿色；
填充：20px；
}
.英雄形态{
网格区域：英雄视频；
边框：1px纯绿色；
填充：20px；
}
页脚{
边框：1px纯色灰色；
文本对齐：居中；
}

如何在网上赚钱
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

目前的文本格式
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作

一些标题
学名
正文

学名
正文

学名
正文

页脚文本