Блог

Я изучаю css grid и пытаюсь создать заголовок с областями сетки.

У меня есть логотип, меню, заголовок и кнопки. Я пытаюсь создать сетку 3×2, чтобы расположить ее. это должно выглядеть так:

логотип ——- меню
—— текст——

Проблема в том, что текстовая область находится в первой строке (между логотипом и меню), когда я ожидаю, что она появится во второй строке.

пример

Что я делаю не так?

Вот мой 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;
  }
  amp;__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;
}


  
  

Я нашел, в чем проблема.

Я ввел неправильный класс для текстового блока.

amp;__text ссылается на .header__menu__текст, когда это должен быть просто .header__текст

Спасибо вам всем!