CSS-如果其项目是 Angular 组件，则网格不工作

Question

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

.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 列中。

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

Answer 1

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

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

现在是网格项目标签。您可以更改布局或将 css 放入 app-nav-component

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

它会起作用。

Answer 2

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

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

我会在 nav.component.css 或 nav.component.scss 中使用如下内容：

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

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

CSS-如果其项目是 Angular 组件，则网格不工作

CSS-Grid not working if its items are Angular components

angular

css

css-grid