CODEWITHSUNDEEP
angularcsscss-grid
Manu Chadha
Manu Chadha

Reputation: 16729

CSS-Grid not working if its items are Angular components

I had a working code (in HTML/CSS grid) which consisted of a css-grid of 3 rows, 2 columns. The first row was navigation (spanning all columns), the middle was content (didn't span all columns) and the final was footer (spanning all the columns). 

.body__div--background {
  background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color:#555555;
  font-family: Verdana;
  line-height:1.5;
  font-size: 11px;
  letter-spacing: 0.25px;
}

.css-grid-container{
  height:100vh; /*???*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr 1fr;  /* 2columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row (content) is 15 times larger than the 3rd row (footer).*/

}

The css to put the elements at proper places in the grid is

.css-grid-item__nav{
  grid-column: 1 / -1; //nav takes 1st row, all columns
  grid-row: 1 / 2;
}

.css-grid-item__practice-div{
  grid-column: 1 / 2; //middle has two divs. This should go in row2, column1
  grid-row: 2 / 3;
  align-self: center;
  justify-self:end;
}

.css-grid-item__create-div{
  grid-column: 2 / 3; //middle has two divs. This should go in row2, column2
  grid-row: 2 / 3;
  align-self: center;
  justify-self:start;

}

.css-grid-item__footer{
  grid-column: 1 / -1; //footer goes in row 3, all columns
  grid-row: 3 / -1;
  background-color: white;
  color:black;

}

The HTML looked something like follows:

<body class="body__div--background"  >

  <div class="css-grid-container">

    <nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item__nav"> 
     ... 
    </nav>

    <div class="css-grid-container__practice-div">  
    ...
    </div>
    <div class="css-grid-item__create-div">
    ...
    </div>

    <div class="css-grid-item__footer">
    ...
    </div>
  </div>

</body>

Later I decided to to use Angular. I created 3 Angular components, nav-component, content-component and footer-component. I copied the css and html to Angular's css/html files.

So, the nav-component's html file has the following content

<nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item__nav"> ... </nav>

and its css has the following content

.css-grid-item__nav{
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

The HTML of app component looks like the following:

<div class="body__div--background"  >

  <div class="css-grid-container">
    <app-nav-component></app-nav-component>
    <app-content-component></app-content-component>
    <app-footer-component></app-footer-component>
  </div>

</div>

However, the nav-component and footer-component occupies only 1 column instead of all the columns. The content-component's two divs are in column 2 instead of being in 1 column each of the grid.

How could I make my code work?

Upvotes: 6

Views: 5340

Answers (2)

Mark
Mark

Reputation: 689

I prefer to use the :host pseudo-class selector in the component's css file. So for:

<app-nav-component></app-nav-component>

I'd use something like the following in nav.component.css or nav.component.scss:

:host {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
}

This will do the same as what @nithalqb suggests, but it allows you to keep all of the css-styling specific to the component in one file. That makes it the preferred method for me, but use whichever method makes sense to you.

Upvotes: 9

nithalqb
nithalqb

Reputation: 243

The code doesn't work in angular because

<app-nav-component></app-nav-component>

is the grid item tag now. Either you change the layout or put css to app-nav-component

app-nav-component {
   grid-column: 1 / -1;
   grid-row: 1 / 2;
}

it will work.

Upvotes: 8

Related Questions