Can angular components be mapped to CSS Grid areas and if so how?

user_3545726 0
Viewed 236

I built a css grid with areas header, search, filters and results in html/css The areas are defined as:

#whole {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
  
    grid-template-areas:
      "header"
      "search"
      "filters"
      "results";
  }
  /* laptop and wider, the search and filters appear next to each other..*/
  @media screen and (min-width: 760px) {
    #whole {
      display: grid;
      grid-template-columns: 33% auto;
      grid-template-rows: auto 15% auto;
  
      grid-template-areas:
        "header  header header"
        "search  filters filters"
        "results results results";
    }
}

Now, I would like to separate the css/html into angular components mapping each to these areas. I added base

I'm focussing on the header which should always be 3 grid columns wide but fits only into column 1.

The header.component.css is:

    header {
      grid-area: header;
      width: 100%;
      color: var(--tertiary);
    }

and it appears 100% of the first column..

I added View encapsulation none but it seems the component limits itself to only fill grid column 1. Here's most of the code :

https://stackblitz.com/edit/angular-ivy-5uts9t?file=src/app/app.component.ts

angular-components css-grid
1 Answers

Oh, the problem is that in the header css it should be now: app-header not : header It seems to work now with:

    app-header {
       grid-area: header;
       width: 100%;
       color: var(--tertiary);
    }
user_35457260
Related