Angular 如果CSS网格的项是角度组件，则该网格不工作_Angular_Css_Css Grid

Angular 如果CSS网格的项是角度组件，则该网格不工作

angular css

Angular 如果CSS网格的项是角度组件，则该网格不工作,angular,css,css-grid,Angular,Css,Css Grid,我有一个工作代码（在HTML/CSS网格中），它由3行2列的CSS网格组成。第一行是导航（跨越所有列），中间是内容（不跨越所有列），最后一行是页脚（跨越所有列）将元素放置在网格中适当位置的css是 .css-grid-item__nav{ grid-column: 1 / -1; //nav takes 1st row, all columns grid-row: 1 / 2; } .css-grid-item__practice-div{ grid-column: 1 / 2;

我有一个工作代码（在HTML/CSS网格中），它由3行2列的

CSS网格组成。第一行是导航（跨越所有列），中间是内容（不跨越所有列），最后一行是页脚（跨越所有列）
将元素放置在网格中适当位置的css
是
.css-grid-item__nav{
  grid-column: 1 / -1; //nav takes 1st row, all columns
  grid-row: 1 / 2;
}

.css-grid-item__practice-div{
  grid-column: 1 / 2; //middle has two divs. This should go in row2, column1
  grid-row: 2 / 3;
  align-self: center;
  justify-self:end;
}

.css-grid-item__create-div{
  grid-column: 2 / 3; //middle has two divs. This should go in row2, column2
  grid-row: 2 / 3;
  align-self: center;
  justify-self:start;

}

.css-grid-item__footer{
  grid-column: 1 / -1; //footer goes in row 3, all columns
  grid-row: 3 / -1;
  background-color: white;
  color:black;

}

HTML看起来如下所示：
<body class="body__div--background"  >

  <div class="css-grid-container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item__nav"> 
     ... 
    </nav>

    <div class="css-grid-container__practice-div">  
    ...
    </div>
    <div class="css-grid-item__create-div">
    ...
    </div>

    <div class="css-grid-item__footer">
    ...
    </div>
  </div>

</body>

它的css有以下内容
<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item__nav"> ... </nav>

.css-grid-item__nav{
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

应用程序组件的HTML如下所示：
<div class="body__div--background"  >

  <div class="css-grid-container">
    <app-nav-component></app-nav-component>
    <app-content-component></app-content-component>
    <app-footer-component></app-footer-component>
  </div>

</div>



但是，导航组件和页脚组件仅占用一列，而不是所有列。内容组件的两个div位于第2列，而不是网格中的每一列
我怎样才能使我的代码正常工作？
代码不能正常工作，因为
<app-nav-component></app-nav-component>

它会工作。
我更喜欢在组件的css文件中使用：host
伪类选择器。因此：
<app-nav-component></app-nav-component>

这与@nithalqb的建议相同，但它允许您将特定于组件的所有css样式保存在一个文件中。这使它成为我的首选方法，但请使用对您有意义的任何方法。
对不起，我不遵循。app nav组件（）已经有classcss-grid-item\uuu nav
。它的css已经是.css-grid-item_uunav{grid column:1/-1；grid row:1/2；}
Hi，Manu。若你们在浏览器中检查，你们可以看到你们的html，就像我在下面提到的：。。。因此，现在网格容器子元素是自定义html标记，而不是标记。谢谢。我将在几分钟后尝试，并分享我的观察结果。不幸的是，它没有起作用。我进一步简化了应用程序。现在容器只包含
（删除了其他组件），但是导航组件仍然没有跨越两个columnsapologies，这次我得到了它。我在一个错误的css文件中添加了app nav组件。它应该被添加到包含代码的html的css文件中
app-nav-component {
   grid-column: 1 / -1;
   grid-row: 1 / 2;
}

<app-nav-component></app-nav-component>

:host {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
}