angular10 - Angular CSS Layout applying but without results

Question

I did simple grid but it is looks like styles is applying but grid is not working correct. All grid items have wrong width and height but css is applied. Stackblitz Why is that? How to fix that?

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

Because the component comes in a wrapper <my-app _nghost-mfj-c40="" ng-version="10.0.9"> which does not have display:grid. I'd suggest body > * instead of just 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>