如果它的项目是 Angular 组件，CSS-Grid 不起作用答案

【问题标题】：CSS-Grid not working if its items are Angular components如果它的项目是 Angular 组件，CSS-Grid 不起作用
【发布时间】：2018-07-02 01:07:32
【问题描述】：

我有一个工作代码（在 HTML/CSS 网格中），它由 3 行 2 列的 css-grid 组成。第一行是导航（跨越所有列），中间是内容（没有跨越所有列），最后是页脚（跨越所有列）。

.body__div--background {
  background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color:#555555;
  font-family: Verdana;
  line-height:1.5;
  font-size: 11px;
  letter-spacing: 0.25px;
}

.css-grid-container{
  height:100vh; /*???*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr 1fr;  /* 2columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row (content) is 15 times larger than the 3rd row (footer).*/

}

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>

后来我决定使用 Angular。我创建了 3 个 Angular 组件，导航组件、内容组件和页脚组件。我将css 和html 复制到了Angular 的css/html 文件中。

所以，导航组件的html文件有以下内容

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

其css内容如下

.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>

但是，nav-component 和 footer-component 只占用 1 列，而不是所有列。内容组件的两个 div 在第 2 列中，而不是在每个网格中的 1 列中。

我怎样才能让我的代码工作？

【问题讨论】：

标签： angular css css-grid

【解决方案1】：

代码在 Angular 中不起作用，因为

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

现在是网格项标记。你要么改变布局，要么把css放到app-nav-component

app-nav-component {
   grid-column: 1 / -1;
   grid-row: 1 / 2;
}

它会起作用的。

【讨论】：

对不起，我不关注。 app-nav-component (
) 已经有类css-grid-item__nav。它的 css 已经是 .css-grid-item__nav{ grid-column: 1 / -1; grid-row: 1 / 2;}
嗨，马努。如果您在浏览器中检查，您可以看到如下所示的 html：

...

所以，现在网格容器子元素是自定义 html 标签而不是
标签。
谢谢。我会在几分钟内尝试并分享我的观察结果。
很遗憾，它没有用。我进一步简化了应用程序。现在容器只包含<app-nav-component>（删除了其他组件），但导航组件仍然没有跨越两列
抱歉，这次我明白了。我在错误的 css 文件中添加了app-nav-component 。它应该被添加到包含代码 <div class="css-grid-container"> 的 html 的 css 文件中

【解决方案2】：

我更喜欢在组件的 css 文件中使用 :host 伪类选择器。所以对于：

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

我会在nav.component.css 或nav.component.scss 中使用类似以下的内容：

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

这将与@nithalqb 建议的相同，但它允许您将特定于组件的所有 css 样式保存在一个文件中。这使它成为我的首选方法，但请使用对您有意义的任何方法。

【讨论】：