как выровнять все по центру через сетку -css - PullRequest
Новая
       10

как выровнять все по центру через сетку -css

0 голосов
/ 31 мая 2018

Я планирую создать этот макет:

enter image description here

Я использую обертку как класс и планирую центрировать все на экране.

Помимо обёртки, как я могу также поставить несколько одинаковых размеров для текста и формы.

Итак, вот мой 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/

Не стесняйтесь изменять его.Извините новичка здесь.

1 Ответ

0 голосов
/ 31 мая 2018

Минимальный подход через CSS Grid .Более того, вы получите полезное руководство здесь CSS Grid - Рэйчел Эндрю .

-Спасибо 

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>
...