Angular CSS 布局应用但没有结果答案

【问题标题】：Angular CSS Layout applying but without resultsAngular CSS 布局应用但没有结果
【发布时间】：2020-12-30 06:00:24
【问题描述】：

我做了简单的网格，但看起来样式正在应用，但网格工作不正确。所有网格项目的宽度和高度都错误，但应用了 css。 Stackblitz这是为什么呢？如何解决？

app.component.html

<header>Header</header>
<nav>Nav</nav>
<main>
  <section>Intro</section>
  <article>Cake</article>
  <article>Cake</article>
  <article>Cake</article>
</main>
<aside>Aside</aside>
<footer>Footer</footer>

app.component.css

.grid-item,
header,
main,
nav,
aside,
footer{
background: #044BD9;
color: white;
border: 1px solid #377EFF;
}

header{
    grid-column-start: 1;
    grid-column-end: 4;
}
footer{
    grid-column-start: 1;
    grid-column-end: 4;
}

styles.css

*{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    box-sizing: border-box;
}

html,body{
    background: #07038C ;
    margin: 0;
    height: 100%;
}

body{
    display: grid;
    grid-template-columns: 15em auto 15em;
    grid-template-rows: min-content auto min-content;
}

【问题讨论】：

“应用了 CSS”是什么意思？我在该演示中的文章元素上没有看到自定义样式。
@Paulie_D，当你在 Angular 组件中做同样的事情时，它会将所有项目放在一列中，忽略 'grid-column-start:' ，'grid-column-end:'。

标签： css angular10

【解决方案1】：

因为组件位于包装器<my-app _nghost-mfj-c40="" ng-version="10.0.9"> 中，而包装器没有display:grid。我建议body > * 而不是body...？

.grid-item,
header,
main,
nav,
aside,
footer {
  background: #044BD9;
  color: white;
  border: 1px solid #377EFF;
}

header {
  grid-column-start: 1;
  grid-column-end: 4;
}

footer {
  grid-column-start: 1;
  grid-column-end: 4;
}

* {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  box-sizing: border-box;
}

html,
body {
  background: #07038C;
  margin: 0;
  height: 100%;
}

body>* {
  display: grid;
  grid-template-columns: 15em auto 15em;
  grid-template-rows: min-content auto min-content;
}

<my-app>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <section>Intro</section>
    <article>Cake</article>
    <article>Cake</article>
    <article>Cake</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</my-app>

【讨论】：