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;
}

What do you mean by "CSS is applied"? I see no custom styles on the article elements in that demo. — isherwood, Dec 29 '20 at 21:45
@Paulie_D, when you will do the same thing in Angular component it would place all items in one column, ignoring 'grid-column-start:' , 'grid-column-end:'. — FFF01, Dec 29 '20 at 21:52

score 1 · Accepted Answer · answered Dec 29 '20 at 22:00

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>

Angular CSS Layout applying but without results

1 Answers1