Row not taking 100% height in css-grid

Question

I want to create a page which has Bootstrap's navbar and css-grid's layout.

At the top level, I have created a css grid with 1 column and two rows. I want the grid to contain 2 rows. The height of the first row should be the same as the height of bootstrap's nav bar. The height of the 2nd row should occupy all the remaining space in the page.

.css-grid-container-common-styles{
    height:100%;
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: auto auto; /* with height = 100%, I want that height for nav is calculated and assigned to row 1, remaining height is assigned to row 2*/
}

Bootstrap's navbar goes in the 1st row spanning all columns

.css-grid-item-nav-div{
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    border: 3px solid black;
}

A button goes in the 2nd row but the row should take all the remaining available space.

.css-grid-item-login-div{
    grid-column: 1 / -1;
    grid-row: 2 / -1;
    border: 3px solid black;
}

Problem - the 2nd row's height is equal to the height of the button. How do I make it take up all the remaining space?

Full code - HTML/CSS

.body-common-styles {
  background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
  /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color: white;
  font-family: Helvetica;
  line-height: 1;
}

.div-common-styles {
  background-color: #0F2148;
}

.button-common-styles-normal {
  /*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); 	*/
  background-color: #4da3f8;
  border: none;
  color: white;
  border-radius: 8px;
  width: 100px;
  /* sets the width of the content area to 200 px */
  height: 40px;
  box-sizing: border-box;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.button-common-styles-normal:hover {
  background-color: #268ff4;
}

.center-horizontally-common-styles {
  display: block;
  margin: auto auto;
}

.centre-vertical-common-styles {
  position: fixed;
  left: 50%;
  /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
  top: 50%;
  /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
  transform: translate(-50%, -50%);
}

.centre-button-vertical-common-styles {
  position: absolute;
  left: 50%;
  /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
  top: 50%;
  /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
  transform: translate(-50%, -50%);
}

.debug-border-common-styles {
  border: 3px solid black;
  height: 200px;
  width: 400px;
}

.css-grid-container-common-styles {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  /*one column for nav*/
  grid-template-rows: auto auto;
}

.css-grid-item-nav-div {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  border: 3px solid black;
}

.css-grid-item-login-div {
  grid-column: 1 / -1;
  grid-row: 2 / -1;
  border: 3px solid black;
}


  
    
    CodingJedi
    
      
        
          Home
        
        
          About

Ren&#233; · Accepted Answer

There are a few issues you'll have to handle for this to work.

First issue might not be an issue in your situation but is one when running this snippet. height: 100% only works when the ancestor element also has a working determined height. For a full screen height you can use 100vh.

Second issue, rows height of auto auto is not that smart, it will pretty much divide space equally. You can replace this with auto 1fr. fr is a new unit with grids in mind and 1fr it will take up 1 remaining fraction.

Third, this is the main issue you're having. You have your border around css-grid-item-login-div but the grid area is defined on its parent. In firefox you could use display:contents but the better solution is to "unwrap" css-grid-item-login-div by removing its parent div

becomes

Full code is in the snippet

body {
  margin: 0;
}

.body-common-styles {
  background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
  /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color: white;
  font-family: Helvetica;
  line-height: 1;
}

.div-common-styles {
  background-color: #0F2148;
}

.button-common-styles-normal {
  /*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); 	*/
  background-color: #4da3f8;
  border: none;
  color: white;
  border-radius: 8px;
  width: 100px;
  /* sets the width of the content area to 200 px */
  height: 40px;
  box-sizing: border-box;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.button-common-styles-normal:hover {
  background-color: #268ff4;
}

.center-horizontally-common-styles {
  display: block;
  margin: auto auto;
}

.centre-vertical-common-styles {
  position: fixed;
  left: 50%;
  /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
  top: 50%;
  /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
  transform: translate(-50%, -50%);
}

.centre-button-vertical-common-styles {
  position: absolute;
  left: 50%;
  /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
  top: 50%;
  /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
  transform: translate(-50%, -50%);
}

.debug-border-common-styles {
  border: 3px solid black;
  height: 200px;
  width: 400px;
}

.css-grid-container-common-styles {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  /*one column for nav*/
  grid-template-rows: auto 1fr;
}

.css-grid-item-nav-div {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  border: 3px solid black;
}

.css-grid-item-login-div {
  grid-column: 1 / -1;
  grid-row: 2 / -1;
  border: 3px solid black;
}


  
    
    CodingJedi
    
      
        
          Home
        
        
          About

Row not taking 100% height in css-grid

Answers (1)

Related Questions