unable to centre child element in css grid

Question

My Angular app's css structure is

-top level app has a css grid with 3 rows -nav component takes 1st row -content-component takes 2nd row -footer takes 3rd row

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

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

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

app-footer-component{
  grid-column: 1 / -1;
  grid-row: 3 / -1;
}

The HTML is

<div class="body__div--background"  >
    <app-nav-component></app-nav-component>
    <app-content-component></app-content-component>
    <app-footer-component></app-footer-component>
  </div>

The content component in the middle is where I want to position my new components. ContentComponent's html code is

<div id="content-div">
  <router-outlet></router-outlet>
</div>

The css is

#content-div{
  height:100%;
  display:grid; 
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: 1fr; /*1 row*/
}

The above component is suppose to act as a container for other components (the nav and footer always stay the same). Now I have another component, HomeComponent. I want the HomeComponent to be placed inside ContentComponent at the center. The html and css I have written for that is

   <div class="homepage-component-css-grid-container" id="home-page-component">
  <app-practice-component></app-practice-component>
  <app-create-component></app-create-component>
</div>

The css is

.homepage-component-css-grid-container{
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr 1fr;  /* 2 columns*/
}

#home-page-component{
  align-self:center; /*center of the content component*/
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}


app-practice-component{
  grid-column: 1 / 2;
  align-self: center;
  justify-self:end;

}

app-create-component{
  grid-column: 2 / 3;
  align-self: center;
  justify-self:start;

}

My issue is that the HomeComponent is not been displayed at the centre. See pic below. Interestingly, I notice that if, via browser's debug tool, I manually add align-self:center in reboot.scss, then the HomeComponent moves to the center. But reboot.scss is not my file. How could I align HomeComponent to center

Pic 1 - behaviour I am observing. HomeComponent not at center

Pic2 - If I add align-self:center in reboot.scss

The centering you want is not entirely clear (at least to me). Have you gone through these options? https://stackoverflow.com/q/45536537/3597276 — Michael Benjamin, Jul 03 '18 at 10:12
Many thanks. I'll read up. If you see the two pics above, in the first one (this is how the app looks now), the 2 white boxes (the big ones, not the ones with black border) are closer to the bottom (footer). What I want is the 2nd pic i.e. the two boxes near the center of the page. In the browser's debug panel, I could move the boxes to center by manually adding `align-items:center` in `reboot.scss`. But I am not able to `center` the boxes in code. Adding `align-items:center` in `#content-div` or `align-self:center` in `#home-page-component` doesn't seem to have any affect. — Manu Chadha, Jul 03 '18 at 10:16
`align-items: center` on *reboot.css* applies the rule to *all* elements (note the `*` selector). This suggests that when you target the rule to your desired grid container, you're not actually targeting the grid container. Grid properties work only between parent-child elements. The parent-child relationship is the scope of grid layout. If you are applying `align-items: center` to a grandparent of the boxes, or another ancestor even further up, then the centering rule won't work. — Michael Benjamin, Jul 03 '18 at 15:06
More details here: https://stackoverflow.com/q/46800525/3597276 — Michael Benjamin, Jul 03 '18 at 15:07
I am able to nail down the issue. It was something different from what we have been discussing but the links you provided are extremely helpful — Manu Chadha, Jul 03 '18 at 18:55

score 0 · Accepted Answer · answered Jul 03 '18 at 19:01

I solved the issue by adding 1 more row in #content-div

The issue (which is visible in the pics as well) is the <router-outlet>. ContentComponent's html has <router-outlet> where Angular will place other components (eg the HomePageComponent). The way Angular does this is by keeping the <router-outlet> tag and adding component specific tag underneath it in the html. Thus the grid need to provide space for both and the component's tag

New code

#content-div{
  height:100%;
  display:grid; 
  grid-template-columns: 1fr;  
  grid-template-rows: auto 99%; 
}

I also added height:100% rule in homepage-component-css-grid-container as otherwise, the height of the grid was only up to the height of its children

.homepage-component-css-grid-container{
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr 1fr;  /* 2 columns*/
  height:100%;
}

I didn't need home-page-component anymore as the align-self and justify-self rules in app-practice-component and app-create-component did the correct alignment

Good work! Don't forget to accept your answer when applicable. — Jake, Jul 03 '18 at 19:03

unable to centre child element in css grid

1 Answers1