Using CSS-Grid Layout in Angular

Question

I am fairly new to Angular (and SPA/Web development in general) and trying to get Angular working together with the new CSS-Grid layout.

Chances are I am simply not importing/injecting a required module but in any case cannot get this to work without getting errors. I did search but could not really find any guide or tutorial for this (Angular and CSS-Grid). There is some information about the CSS-Grid of course but close to nothing related to Angular.

I tried for example the following (taken from here http://maddesigns.de/css-grid-layout-2764.html):

/* CSS */
.wrapper {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;   
}

 <!-- HTML -->
<div class="wrapper">
   <div class="box a">.a</div>
   <div class="box b">.b</div>
   <div class="box c">.c</div>
   <div class="box d">.d</div>
 </div>

That snippet works here ('Run Code snippet').

But if I create a new angular/CLI project and copy the code straight to app.component.css and app.component.html (probably a bit naive) then it is kind of working but in Firefox I am also getting the error "Error when processing the value 'display'. Declaration ignored." (translated manually from German to English)

This makes me believe I am missing something fundamentally I am not aware of.

There's nothing wrong with the css/html, you should add your angular's code as well. — Ofir Baruch
– Ofir Baruch, Commented Nov 16, 2017 at 10:13
I pasted that code as is to app.component.css and app.component.html — naitsirhc
– naitsirhc, Commented Nov 16, 2017 at 10:21
That did not help but the pointer was excellent never the less! — naitsirhc
– naitsirhc, Commented Nov 16, 2017 at 13:19

naitsirhc · Accepted Answer · 2017-11-16 13:18:25Z

1

The code is fine, the issue turned out to be browser related which just shows how new I am to web development.

I tested some browsers:

IE 11: does not work, exception
Chrome 62: works, no warnings
Firefox 56: works, but shows the warning mentioned in the question
Firefox 57 (Quantum): works, no warnings

answered Nov 16, 2017 at 13:18

naitsirhc

1332 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

peinearydevelopment Over a year ago

A great resource for things like this is CanIUse. For example css-grid

Emre HIZLI · Accepted Answer · 2018-07-16 13:31:58Z

i think this will helps for you;

@Directive({
  selector: "[v-grid]"
})
export class GridDirective {
  @HostBinding("style.grid-template-columns")
  @Input() columns: string;
  @HostBinding("style.grid-template-rows")
  @Input() rows: string;
  @HostBinding("style.grid-template-areas")
  @Input() areas: string;

  constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, "display", "grid");
    this.renderer.setStyle(this.el.nativeElement, "height", "100%");
  }
}

@Directive({
  selector: "[v-grid-area]"
})
export class GridAreaDirective {
  @HostBinding("style.grid-area")
  @Input("v-grid-area") area: string;
}

Using like this;

<div v-grid columns="1fr 100px" rows="1fr 1fr" areas="'area1 area2' 'area1 area2'">
   <div v-grid-area="area1" style="background-color: red">
      <div style="height: 1000px"></div>
   </div>
   <div v-grid-area="area2" style="background-color: yellow"></div>
</div>

Collectives™ on Stack Overflow

Using CSS-Grid Layout in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related