css - 无法弄清楚如何使用 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";}

标签： csscss-grid

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没有网格一样会正常运行。除非您还将.child-1元素指定为带有display: grid.

在您的情况下，您header的元素是该元素的直接子.container元素，因此它是一个网格项，可以定位在网格上的任何位置，但logoandnavi元素是 的子元素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>