CSS 网格：内容排错了

Question

我正在学习 css 网格，并尝试用网格区域制作 header。

我有徽标、菜单、标题和按钮。我正在尝试制作 3x2 网格来定位它。它应该看起来像这样：

标志--------菜单
------正文------

问题是文本区域出现在第一行（徽标和菜单之间），而我希望它出现在第二行。

example

我做错了什么？

这是我的 html 和 css:

  <div class="header__menu container">
    <a class="logo__link" href="www.moldex3d.com">Moldex3D</a>
    <nav class="menu"> 
      <a class="menu__link" href="#">Промо</a>
    </nav>
    <div class="header__text">
      <h1 class="header__title">Первый среди лучших</h1>
      <h2 class="header__subtitle">Компьютерное моделирование литья пластмасс</h2>
      <a class="button" href="">Попробовать бесплатно!</a>
    </div>
  </div>
</header>



.header__menu{
  display: grid;
  
  .logo__link{
    grid-area: logo;
  }
  .menu{
    grid-area: nav;
  }
  &__text{
    grid-area: text;
  }
  
  grid-template-columns: 2fr 8fr 2fr;
  grid-template-rows: 2fr 10fr;
  grid-template-areas: "logo . nav" ". text .";
  min-height: 800px;
  height: 100vh;
}

Answer 1

找到问题所在了

我输入错误的文本块class。

&__text指的是.header__menu__text，而应该只是.header__text

谢谢大家！

CSS 网格：内容排错了

CSS Grid: content goes in the wrong row

css

grid