Понимание CSS-сетки и flexbox

Question

https://codepen.io/masm/pen/MxWBEB

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

HTML:

<div id="hd">
  <div class="container">
    <div class"ct">
      <div class="logo">
        Logo
      </div>
      <div class="nav">
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a href="#">four</a>
        <a href="#">five</a>
      </div>
    </div>
  </div>

CSS:

.container { 
  width: 960px; 
  margin: 0 auto; 
  display: grid;
  grid-template-columns: 2fr 1fr; 
  grid-template-areas: "top top"
    "main side"
}

.ct { 
  grid-area: top;
}

.logo { 
  background: #ddd;
}

.nav { 
  background: #ddf; 
}

Во-вторых, я пытаюсь сделать так, чтобы логотип и навигация были рядом.Моя идея состояла в том, чтобы установить .ct для отображения: flex, однако это не работает.

.ct { 
  grid-area: top;
  display: flex; 
  flex-direction: column; 
}

Наконец, я хочу, чтобы цвета фона заголовка охватывали всю ширину страницы, а содержимое (логотип, навигация, главное, боковое) занимало не более 960 пикселей ширины,именно поэтому я добавил контейнер между #hd и #main divs.Мой вопрос здесь, это хороший подход?

Answer 1

Проблемы, которые я отметил в вашем коде, следующие:

вы забыли добавить «=» перед именем класса.то есть "" тогда вы положили "flex-direction: column;"

Пожалуйста, проверьте следующую скрипку.Надеюсь, это то, что вы ищете

Попробуйте эту скрипку

.ct { 
 grid-area: top;
 display: flex; 
 flex-direction: row; 
}

Answer 2

Рядом необходимо расположить их по строкам и по центру выровнять содержимое div по вертикали. Также задайте ему некоторую предопределенную высоту:

.ct{
  height: 80px;
  display: flex;
  justify-content: flex-start;
  align-items:center;
  flex-flow: row;
}

Answer 3

Удалить flex-direction: column; и = после класса ct

<div class="ct">

#hd { 
background: #444;
}

.container { 
  width: 960px; 
  margin: 0 auto; 
  display: grid;
  grid-template-columns: 2fr 1fr; 
  grid-template-areas: "top top"
    "main side"
}

.ct { 
  grid-area: top;
  display: flex; 
  flex-direction: column; 
}

.logo { 
  background: #ddd;
}

.nav { 
  background: #ddf; 
}

.main {
  background: #ee0099; 
  grid-area: main;
}

.side { 
  background: #efefef; 
  grid-area: side;
}

.ct { 
  grid-area: top;
  display: flex; 
  flex-direction: column; 
}

<div id="hd">
  <div class="container">
    <div class="ct">
      <div class="logo">
        Logo
      </div>
      <div class="nav">
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a href="#">four</a>
        <a href="#">five</a>
      </div>
    </div>
  </div>
</div>
<div id="mn">
  <div class="container">
    <div class="main">
      <p>hello</p>
    </div>
    <div class="side">
      <p>hello</p>
    </div> 
  </div> 
</div>