Не могу понять, как выровнять логотип и навигацию подряд, используя сетку CSS

Question

Я пытаюсь выровнять логотип и панель навигации в одном ряду по верхней части сайта, используя сетку CSS.

Я написал код, но не могу понять, что я делаю неправильно, почему он не работает: https://codepen.io/chloewb/pen/wRRewQ

     .logo{
    grid-area: logo;
    background:white;}
    .navi{
     grid-area: navi;
    background:Yellow;}
    .section1{
     grid-area: features;
    background:LightSalmon;}
    .section2{
     grid-area: technology;
    background:PaleTurquoise;}
    .section3{
     grid-area: pricing;
    background:LightPink;}
    .section4{
    grid-area: email;
    background:PaleGreen;}
  
    .container {
    display: grid;
    grid-template-rows: repeat (5, auto);
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 40px;
    width: 100%;
    background: grey;
     grid-template-areas:
      "logo navi navi"
      "features features features"
       "technology technology technology"
       "pricing pricing pricing"
       "email email email";}

Answer 1

Первое, на что нужно обратить внимание, это то, что, когда вы используете display: grid для элемента контейнера, его непосредственные дочерние элементы станут grid-items, и к этим элементам будет применяться компоновка сетки, которую вы создадите.

Допустим, у нас есть следующее:

<div class="container">
    <div class="child-1">
        <div class="child-2"></div>
        <div class="child-2"></div>
    </div>
    <div class="child-1"></div>
    <div class="child-1"></div>
    <div class="child-1"></div>
</div>

А это CSS:

.container{
        display: grid;
    }

Тогда только child-1 станут элементами сетки и смогут применять к ним свойства, подобные grid-area; все остальное внутри .child-1, например .child-2, будет вести себя нормально, как будто нет Grid. Если вы также не укажете элемент .child-1 как сетку с display: grid.

В вашем случае ваш элемент header является прямым потомком элемента .container, поэтому он является элементом сетки и может быть расположен в любом месте сетки, но элементы logo и navi являются потомками header, поэтому компоновка сетки к ним не относится. Вам нужно будет либо убрать их из header, чтобы написанные вами правила вступили в силу, либо создать другую сетку в заголовке и позволить ей использовать полную первую строку. Посмотрите этот пример и обратите внимание, как вложение элементов влияет на них.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(50px, auto);
  grid-template-areas: "logo navi navi";
  margin-bottom: 20px;
  border: 1px solid black;
}

.logo {
  border: 1px solid red;
  grid-area: logo;
}

.navi {
  border: 1px solid blue;
  grid-area: navi;
}

<div class="container">
  <div class="logo">Logo</div>
  <div class="navi">Nav</div>
</div>

<div class="container">
  <header>
    <div class="logo">Logo</div>
    <div class="navi">Nav</div>
  </header>
</div>