我如何通过包装-css网格对齐中心的所有内容

Question

我打算创建这个布局：

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

除了包装器，我如何为文本和表单添加一些相同的大小。

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

任何想法如何快速实现下面的布局？ 您可以在此处查看我的代码：https://jsfiddle.net/f14qxLf5/1/

随意修改它。对不起新手在这里。

Answer 1

通过 CSS网格的最小方法。此外，您将在此处获得有用的教程CSS Grid - Rachel Andrew 。

- 谢谢你

lapply(my.list, function(x) x[2,]-x[1,])

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;
}