CODEWITHSUNDEEP
htmlcsscss-grid
juicy89
juicy89

Reputation: 458

css grid layout - height of rows never works

I want to use percentages in my css for my react app but it's causing such a headache. Width % work fantastic all the time but the height % is always an issue. It seems almost like I HAVE to specify a height in pixels for it to work work unless the element contains children.

Am I missing something fundamental here. Will a div not set itself to 100% of the remaining height without child elements. The below code doesn't work despite me setting the align-items property to stretch. 

.search-container{
    display: grid;
    grid-template-columns: auto 900px 300px auto;
    grid-template-rows: 30% auto auto;
    grid-gap: 20px;
}

.promo-container {
    background-color:blue;
    grid-column-start: 2;
    grid-column-end: 3;
    align-items: stretch;
}

.form-container {
    background-color:blue;
    grid-column-start: 3;
    grid-column-end: 4;
    align-items: stretch;
}

.results-header {
    background-color:rgb(255, 94, 0);
    grid-column-start: 2;
    grid-column-end: 4;
    height: 90px;
}

.refine-search {
    background-color:blue;
    grid-column-start: 2;
    grid-column-end: 3;
    height: 100%;
}

.results-container{
    background-color:rgb(0, 255, 42);
    grid-column-start: 2;
    grid-column-end: 3;
}
<div className="search-container">
  <div className="promo-container">
  </div>              
  <div className="form-container">
  </div>
  <div className="results-header">
  </div>
  <div className="refine-search">
  </div>
  <div className="results-container">
  </div>
</div>

Upvotes: 1

Views: 2980

Answers (2)

mblancodev
mblancodev

Reputation: 506

The problem with height is that you need to have some childrens in order to work. So if you want to see the blank space where is supposed to be the childrens ( the rest of the elements) you indeed have to set pixels, rem, fr, etc. Otherwise The grid won't allow the blank space to be there if there's nothing in there. For example if I want to see my remaining space I can say: 

`.someClass {
   display: grid; 
   /* I'm setting the rows to be 3 row with a given space of 1 fr 
    each row will be placed with given space unit */
   grid-templates-rows: repeat(3, 1fr);
   grid-template-columns: repeat(5, 1fr);
}`

Otherwise if you want to create the grid depending automatically on the availaible space you can set everything to auto like so: 

.someotherClass {
 display: grid;
 /* grid template areas is the combination of the template rows and columns */
 grid-templates-areas: auto;
 }

Of course with the auto I can still order my items on the rows and columns that I want but the space will be adjusted accordingly with each element

To give you some idea how the grid works check out this page: https://cssgridgarden.com/

Hope helps :)

Upvotes: 0

Robert
Robert

Reputation: 38

You need to set the height of your parent elements.

html, body, div {
    height: 100%;
    width: 100%;
}

Upvotes: 1

Related Questions