html - 我如何通过 wrapper -css grid 将所有内容对齐到中心

Question

我打算创建这个布局:

我正在使用 wrapper 作为类，并计划将所有内容置于屏幕中心。

除了包装外，我还能如何为文本和表单设置一些相同的大小。

到目前为止，这是我的 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 Grid 的最小方法。此外，您将在这里获得有用的教程 CSS Grid - 作者 Rachel Andrew。

-谢谢

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">
    <a href="#" id="logo">LOGO</a>
  </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>