Angular CSS 布局应用但没有结果

Question

我做了简单的网格，但看起来样式正在应用，但网格无法正常工作。所有网格项目的宽度和高度都错误，但应用了 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;
}

Answer 1

因为组件包含在包装器 <my-app _nghost-mfj-c40="" ng-version="10.0.9"> 中，而包装器 <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>

Angular CSS 布局应用但没有结果

Angular CSS Layout applying but without results

css

angular10